TypeScript基礎入門之命名空間和模塊

轉載TypeScript基礎入門之命名空間和模塊

命名空間和模塊

關於術語的說明：值得注意的是，在TypeScript 1.5中，命名法已經改變。
"內部模塊"如今是"命名空間"。
"外部模塊"如今只是"模塊"，以便與ECMAScript 2015的術語保持一致（即module X {至關於如今首選的namespace X {）。

介紹

本文概述了使用TypeScript中的命名空間和模塊組織代碼的各類方法。
咱們還將討論如何使用命名空間和模塊的一些高級主題，並解決在TypeScript中使用它們時常見的一些陷阱。

有關模塊的更多信息，請參閱模塊文檔。
有關命名空間的更多信息，請參閱命名空間文檔。

使用命名空間

命名空間只是全局命名空間中的JavaScript對象。
這使命名空間成爲一個很是簡單的構造。
它們能夠跨多個文件，而且可使用--outFile鏈接。
命名空間能夠是在Web應用程序中構建代碼的好方法，全部依賴項都包含在HTML頁面中的<script>標記中。

就像全部全局命名空間污染同樣，很難識別組件依賴性，尤爲是在大型應用程序中。

使用模塊

就像命名空間同樣，模塊能夠包含代碼和聲明。
主要區別在於模塊聲明瞭它們的依賴關係。

模塊還依賴於模塊加載器（例如CommonJs/Require.js）。
對於小型JS應用程序而言，這可能不是最佳選擇，但對於大型應用程序，成本具備長期模塊化和可維護性優點。
模塊爲捆綁提供了更好的代碼重用，更強的隔離和更好的工具支持。

值得注意的是，對於Node.js應用程序，模塊是構造代碼的默認方法和推薦方法。

從ECMAScript 2015開始，模塊是該語言的本機部分，而且應該受到全部兼容引擎實現的支持。
所以，對於新項目，模塊將是推薦的代碼組織機制。

命名空間和模塊的缺陷

下面咱們將描述使用命名空間和模塊時的各類常見缺陷，以及如何避免它們。

/// <reference>-ing a module

一個常見的錯誤是嘗試使用/// <reference ... />語法來引用模塊文件，而不是使用import語句。
爲了理解這種區別，咱們首先須要瞭解編譯器如何根據導入的路徑找到模塊的類型信息（例如...在,import x from "...";import x = require("...");等等。路徑。

編譯器將嘗試使用適當的路徑查找.ts，.tsx和.d.ts。
若是找不到特定文件，則編譯器將查找環境模塊聲明。
回想一下，這些須要在.d.ts文件中聲明。

myModules.d.ts

// In a .d.ts file or .ts file that is not a module:
declare module "SomeModule" {
    export function fn(): string;
}

myOtherModule.ts

/// <reference path="myModules.d.ts" />
import * as m from "SomeModule";

這裏的引用標記容許咱們找到包含環境模塊聲明的聲明文件。
這就是使用幾個TypeScript示例使用的node.d.ts文件的方式。

無需命名空間

若是您要將程序從命名空間轉換爲模塊，則能夠很容易地獲得以下所示的文件：

shapes.ts

export namespace Shapes {
    export class Triangle { /* ... */ }
    export class Square { /* ... */ }
}

這裏的頂級模塊Shapes平白無故地包裝了Triangle和Square。
這對您的模塊的消費者來講是使人困惑和惱人的：

shapeConsumer.ts

import * as shapes from "./shapes";
let t = new shapes.Shapes.Triangle(); // shapes.Shapes?

TypeScript中模塊的一個關鍵特性是兩個不一樣的模塊永遠不會爲同一範圍提供名稱。
由於模塊的使用者決定分配它的名稱，因此不須要主動地將命名空間中的導出符號包裝起來。

爲了重申您不該該嘗試命名模塊內容的緣由，命名空間的通常概念是提供構造的邏輯分組並防止名稱衝突。
因爲模塊文件自己已是邏輯分組，而且其頂級名稱由導入它的代碼定義，所以沒必要爲導出的對象使用其餘模塊層。

這是一個修改過的例子：
shapes.ts

export class Triangle { /* ... */ }
export class Square { /* ... */ }

shapeConsumer.ts

import * as shapes from "./shapes";
let t = new shapes.Triangle();

模塊的權衡

正如JS文件和模塊之間存在一對一的對應關係同樣，TypeScript在模塊源文件與其發出的JS文件之間具備一對一的對應關係。 這樣作的一個結果是，根據您定位的模塊系統，沒法鏈接多個模塊源文件。 例如，在定位commonjs或umd時不能使用outFile選項，但使用TypeScript 1.8及更高版本時，能夠在定位amd或system時使用outFile。