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和模塊化兼容後續添加