TS 中的 Module 的概念相容 ES 2015 中 Module 的概念。

簡介

模組中的程式碼屬於模組本身的作用域，而不是全域性作用域。也這就意味著沒有明確的 export 的話，模組中的 變數，函式，類等對其他模組是不見的。相對的其他模組要使用某一模組的內容需要通過 import 匯入。

Export

1. 匯出一個宣告：通過在宣告前加 export 關鍵詞修飾即可匯出。
2. 匯出語句：也可以像 import 語句的逆形式一樣，通過類似如下的語句匯出：

export { User };
export { User as BaseMember };

1. 從其他模組中匯出: export { User as BaseMember } from "./users" }

2. 從其他模組中匯出全部： export * from ".users"

Import

1. 從模組中匯入單個匯出： import { User} from "./users"
2. 匯出時重新命名 : import { User as BaseMember} from "./users"
3. 從模組中匯入全部到一個變數名中:import * as users from "./users"
4. 單純的匯入模組以執行模組: import "./my-module.js"

Default exports

每一個模組都有一個可選的預設匯出. 在 export 後面加 default

export = 和 import = require()

在 CommonJS 和 AMD 模組系統中都一個 exports 的變數，用來包裝一個模組的所有匯出。為了相容這些模組系統。 TS 也支援 export = 的語法來匯出模組的單個物件。但是注意 export = 必須和 import module = require("module") 搭配使用。

匯入其他的 JS 庫

在 TS 的術語中把沒有定義實現的宣告稱之為 ambient 。這些宣告一般定義在 .d.ts 檔案中。你可以把他們理解成 c/c++

Ambient Modules

例如有一個名為 node.d.ts 的檔案。
然後便可以將下面一樣來匯入：

/// <reference path="node.d.ts"/>
import * as URL from "url";
let myUrl = URL.parse("http://demo.com");

TS 也提供了不提供模組的具體的宣告文，來匯入 JS 庫的支援。
即提供一種簡寫的方式：
如下 declarations.d.ts

declare module "hot-new-module";

這樣模組中所有的匯入的型別都將是 any 型別。
import x, {y} from "hot-new-module";

Guidance for structuring modules

1. 匯出層級不要太深。從模組中匯出一個 namespace 加增加一個層級。如果沒有必要不要增加層級 。

2. 如果只匯出一個單一的類或函式，使用 export default。

3. 匯出多個物件時，把他們放在最頂層。

4. 顯式的列出所有要匯入的名字。

5. 如果要匯入很多的東西的時候，可以考慮使用 namespace 匯入模式。
   如 import * as largeModule from "./MyLargeModule.ts";

6. 通過 re-export 來擴充套件。

7. 不要在模組中使用 namespaces。

作者：一半晴天
連結：https://www.jianshu.com/p/30a8c7dc85db
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。