TypeScript实战-20-TS模块化

一,前言

在JS的项目中,随着工程的不断增大,为了便于管理和模块复用,产生了很多模块化解决方案
如CommonJS,AMD,CMD及ES模块,目前最常用的是ES6的模块,CommonJS模块

TS对这两种模块系统都有比较好的支持

---

二,ES6模块导出

src下新建es6文件夹,并创建a.ts, b.ts, c.ts文件

三者关系为:c依赖a, a依赖b(使用a.ts演示导出,c.ts演示导出)

在index.ts中引入c.ts

import './es6/c'

1,单独导出:

// 单独导出
export let a = 1

2,将多个变量放到一个对象中批量导出

// 批量导出
let b = 2
let c = 3
export {b, c}

3,在TS中,ES6可以单独导出一个接口,也可以直接导出一个函数

// 导出接口
export interface P {
    x: number
    y: number
}

4,在TS中,也可以直接导出一个函数

// 导出函数
export function f() {}

5,导出时,未变量起别名:

// 导出时起别名
function g() {}
export {g as G}

6,导出时,未变量起别名:

// 导出时起别名
function g() {}
export {g as G}

7,ES6中的默认导出

使用export default默认导出时,不需要为函数命名(此时如果命名,导入时无效)

// 默认导出,无需函数名
export default function () {}

8, 引入外部模块,重新导出

a.ts中引入b.ts中导出的常量,并重命名为hello后导出

a.ts

// 引入外部模块,重新导出
export { str as hello } from './b'

b.ts

// 导出常量
export const str = 'Hello'

---

三,ES6模块导入

在c.ts中导如:

1,批量导入

// 批量导入
import { a, b, c } from './a'	// 1 2 3

2,导入接口

// 导入接口
import { P } from './a'  
let p: P = {
    x: 1,
    y: 2
}

3,导入时起别名

// 导入时起别名
import { f as F } from './a'

4,使用* as + 变量名,导出所有成员并绑定到该变量

import * as All from './a'
console.log(All)

注意:

打印的all对象中,被添加了一个default属性,这是兼容性导致

5,默认导入(不加括号)

// 默认导入-不加括号
import myFunc from './a'
myFunc()

---

四,结尾

只介绍了ES6模块化,CommonJS和模块化兼容后续添加