使用import/export引入和输出模块

751 阅读1分钟

这一部分和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

这里我们实现一个入口文件的输入/输出效果如下:

  • 输出AgetA作为子模块,并创建一个a指向A
  • 输出BgetB作为子模块,并创建一个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 ]

符合预期。


就酱