这一部分和TypeScript的使用并不强相关,主要是ES-Module一些模块管理常用效果的介绍,实操为主。
创建三个子模块和一个入口文件
子模块 a.ts
// 模块A
export const A: number = 1
export default (): number => A
常规调用方式:
import getA, { A } from './a'
子模块 b.ts
// 模块B
export const B: number = 2
export default (): number => B
常规调用方式:
import getB, { B } from './b'
子模块 c.ts
import getA from './a'
import getB from './b'
export default (): [number, number] => [ getA(), getB() ]
常规调用方式:
import getC from './c'
创建入口文件 index.ts
这里我们实现一个入口文件的输入/输出效果如下:
- 输出
A和getA作为子模块,并创建一个a指向A。 - 输出
B和getB作为子模块,并创建一个b指向B。 - 输出
C模块的default作为默认default输出
在index.ts并没有代码实体,主要看一下写法,如何直接export其他模块:
export { default as getA, A, A as a } from './a'
export { default as getB, B, B as b } from './b'
export { default } from './c'
验证
改一下test.ts的代码:
import getC, {
A, a, getA,
B, b, getB,
} from '.' // 注意这个引入路径的写法,虽然很酷但我不太推荐。
console.log(A, a, getA())
console.log(B, b, getB())
console.log(getC())
在写import的时候,vs中已经有提示了。
npm test
> ts-learn@1.0.0 test /ts-learn/export
> ts-node test
1 1 1
2 2 2
[ 1, 2 ]
符合预期。
就酱