TypeScript學習(十七)：模塊解析 | 八月更文挑戰

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

TS 1.5 開始內部模塊用命名空間表示，外部模塊用 module 表示。

使用場景

以文件爲例：一份文件就能夠看做是一個模塊

當文件內的代碼愈來愈多的時候，咱們但願可以有某種組織標準能夠追蹤類型而且不用擔憂命名衝突。能夠經過將對象包含在一個命名空間中( 非全局命名空間 )來解決這個問題。

index.ts

namesapce validator{
    class Val{}
}
複製代碼

在文件內部中能夠經過 validator.Val 訪問對象。若是須要在文件外部訪問的話，須要加上 export 關鍵字。

文件分割

應用體積膨脹的時候，更應該打散代碼到各個文件中以便於維護。

多文件命名空間

當文件分割以後，每一個文件都創立了相同的命名空間，而且這些文件中的命名空間須要互相鏈接、訪問。行爲上，就如同以前在同一份文件中同樣。所以，須要添加引用標記。

index1.ts

namespace NS{
    class Val1{}
}
複製代碼

index2.ts

/// <reference path="index1.ts"/>
namespace NS{
    class Val2{}
}
複製代碼

impl.ts

/// <reference path="index1.ts">
/// <reference path="index2.ts">

let val1 = new NS.Val1()
複製代碼

一旦涉及到多文件，咱們必須確保每份文件的的代碼都被編譯。有兩種方法能夠確保：

--outFile

方法一：使用 --outFile 將全部文件編譯到一份文件中。編譯器會自動按順序將引用的文件編譯完畢。

tsc --outFile sample.js impl.ts
複製代碼

方法二：

固然，也可使用以下命令手動進行，最終會獲得多份文件。

tsc --outFile sample.js index1.ts index2.ts impl.ts
複製代碼

由於獲得了多份編譯後的文件，在使用的時候須要使用

<script src="index1.js" type="text/javascript" /><script src="index2.js" type="text/javascript" /><script src="impl.js" type="text/javascript" />
複製代碼

別名

可使用 import = A.B.C 爲 命名空間 建立別名。注意與import = require("xxx")的區別。

namespace Shapes{
    export namespace Polynes{
        class Square()
    }
}

import polynes = Shapes.Polynes

const square = new polynes.Square() // Same as 'new Shapes.Polygons.Square()'
複製代碼

注意不要使用 require 關鍵字。

Ambient Namespaces

D3 定義了全局對象 d3。由於使用 d3 的時候是經過

declare namespace D3{
    export interface Selectors{}
    export interface Event{
        x: number
    }
    export interface Base extends Selector(){
        event: Event
    }
}

declare var d3: D3.base
複製代碼