TypeScript學習(十八)：模塊與命名空間 | 八月更文挑戰

「這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰」

使用模塊

模塊包括代碼與聲明

模塊能夠提供更好的代碼複用，代碼隔離與更好的打包工具支持。對於 Node 應用，優先推薦使用模塊，而非命名空間。從  ES6 開始，JS 有了模塊系統，而且已由編譯器實現。

使用命名空間

命名空間是 TS 特定的組織代碼的方式。命名空間們本質上知識多個簡單的 JS 對象。所以能夠很方便地使用命名空間。相同的命名空間能夠分散在多文件中，而且經過 --outFile 鏈接起來。在 Web 應用中，命名空間能夠很好地用來組織代碼。產生的依賴文件可使用

可是，在一個大型的應用中，命名空間難以區分項目各個組件的依賴。

模塊與命名空間的行爲區別

在模塊中使用 ///

錯誤行爲：使用 /// 語法去導入一個模塊。模塊只能經過 import 語法導入。

可是，若是是一個非模塊文件，好比單純的聲明文件，可使用 /// 語法導入。

someModule.ts

// 非模塊文件
declare module "someModule"{
    export function (): string;
}
複製代碼

index.ts

/// <reference path="someModule.ts">
import * as m from "SomeModule";
複製代碼

此時，/// 用以定位生命文件。

沒必要要的命名空間

下方 shape.ts 中使用了命名空間，在使用的時候，容易形成理解困難，爲何是shapes.Shapes？

shape.ts

export namespace Shapes {  export class Triangle {    /* ... */  }  export class Square {    /* ... */  }}
複製代碼

shapeConsumer.ts

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

在 TS 中，模塊的特色之一是：模塊的消費者在使用模塊的時候，就會給其指定名稱。所以沒有必要再給導出對象包裹一層命名空間。

而且使用命名空間的狀況通常是提供一個本地的代碼邏輯區塊以防止命名衝突。
模塊文件自己就是一個大的代碼塊，其頂級名稱是由模塊消費者定義的，也就麼有必要在模塊外部包裹一層命名空間。

所以代碼能夠修改爲以下：

shape.ts

export class Triangle {    /* ... */  }  
export class Square {    /* ... */  }
複製代碼

index.ts

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