一、模組

TypeScript 與ECMAScript 2015 一樣，任何包含頂級 import 或者 export 的檔案都被當成一個模組

相反地，如果一個檔案不帶有頂級的import或者export宣告，那麼它的內容被視為全域性可見的

例如我們在在一個 TypeScript 工程下建立一個檔案 1.ts，宣告一個變數a，如下：

const a = 1

然後在另一個檔案同樣宣告一個變數a，這時候會出現錯誤資訊

提示重複宣告a變數，但是所處的空間是全域性的

如果需要解決這個問題，則通過import或者export引入模組系統即可，如下：

const a = 10;

export default a

在typescript中，export關鍵字可以匯出變數或者型別，用法與es6模組一致，如下：

export const a = 1
export type Person = {
    name: String
}

通過import 引入模組，如下：

import { a, Person } from './export';

二、名稱空間

名稱空間一個最明確的目的就是解決重名問題

名稱空間定義了識別符號的可見範圍，一個識別符號可在多個名字空間中定義，它在不同名字空間中的含義是互不相干的

這樣，在一個新的名字空間中可定義任何識別符號，它們不會與任何已有的識別符號發生衝突，因為已有的定義都處於其他名字空間中

TypeScript 中名稱空間使用 namespace 來定義，語法格式如下：

namespace SomeNameSpaceName {
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

以上定義了一個名稱空間 SomeNameSpaceName，如果我們需要在外部可以呼叫 SomeNameSpaceName 中的類和介面，則需要在類和介面新增 export 關鍵字

使用方式如下：

SomeNameSpaceName.SomeClassName

名稱空間本質上是一個物件，作用是將一系列相關的全域性變數組織到一個物件的屬性，如下：

namespace Letter {
  export let a = 1;
  export let b = 2;
  export let c = 3;
  // ...
  export let z = 26;
}

編譯成js如下：

var Letter;
(function (Letter) {
    Letter.a = 1;
    Letter.b = 2;
    Letter.c = 3;
    // ...
    Letter.z = 26;
})(Letter || (Letter = {}));

三、區別

  • 名稱空間是位於全域性名稱空間下的一個普通的帶有名字的  JavaScript  物件，使用起來十分容易。但就像其它的全域性名稱空間汙染一樣，它很難去識別元件之間的依賴關係，尤其是在大型的應用中

  • 像名稱空間一樣，模組可以包含程式碼和宣告。不同的是模組可以宣告它的依賴

  • 在正常的TS專案開發過程中並不建議用名稱空間，但通常在通過 d.ts 檔案標記 js 庫型別的時候使用名稱空間，主要作用是給編譯器編寫程式碼的時候參考使用