TypeScript入門八：TypeScript的命名空間

• 初識命名空間（namespace指令）
• 命名空間與文件拆分
• 多重命名空間與三斜杠指令引入依賴文件

 一、初識命名空間（namespace指令）

TypeScript的命名空間可以說就是ES6的模塊化，其編譯的ES5代碼都是基於閉包將局部變量暴露給外部，作為外部一個對象的屬性提供給外部作用域使用。先來看一個最簡單的示例：

namespace MyMath{ //使用namespace指令聲明命名空間MyMath
    //使用export指令暴露到作用域外部
    export const PI = 3.14;
    export function sumValue(num1:number, num2:number){
        return num1 + num2;
    }
}
console.log(MyMath.PI);//在外部使用命名空間
console.log(MyMath.sumValue(2,3));

來看看上面命名空間ES5語法編譯的代碼：

var MyMath;
(function (MyMath) {
    //使用export指令暴露到作用域外部
    MyMath.PI = 3.14;
    function sumValue(num1, num2) {
        return num1 + num2;
    }
    MyMath.sumValue = sumValue;
})(MyMath || (MyMath = {}));
console.log(MyMath.PI); //在外部使用命名空間
console.log(MyMath.sumValue(2, 3));

 二、命名空間與文件拆分

前面我們已經知道TypeScript命名空間就是將閉包內部的變量，通過暴露到外部以對象引用的方式給外部使用，當一個頁面基於多個Ts腳本文件時，能想到的第一個方法就是將各個Ts文件轉換的js文件依次引入到頁面就可以實現了。比如下面這個示例：

工作區間
    index.html
    index.ts
    index.js//IDE自動轉換的腳本
    a.ts
    a.js//IDE自動轉換的腳本
    b.ts
    b.js//IDE自動轉換的腳本
    tsconfig.json

然后將第一節中的示例代碼拆分到各個文件中：

//a.ts
namespace MyMath{ 
    export const PI = 3.14;
}
//b.ts
namespace MyMath{
    export function sumValue(num1:number, num2:number){
        return num1 + num2;
    }
}
//index.ts--在這里使用命名空間的內容
console.log(MyMath.PI);
console.log(MyMath.sumValue(2,3));

//index.html引入各個ts轉換的js腳本
    <script src="./a.js"></script>
    <script src="./b.js"></script>
    <script src="./index.js"></script>

上面這種最暴力的方式顯然不能成為我們最想要的，TS當然也給我們提供了一個解決方案，通過IDE將所有ts轉碼到一個js腳本中，通過命令行工具outfile來實現：

 tsc --outfile index.js a.ts b.ts index.ts

通過outfile命令將a.ts、b.ts、index.ts就可以統一轉碼打包到一個index.js文件中，然后index.html就只需要引入一個index.js文件就可以了。

但是這時候可能你還是會覺得不夠智能，你會想能不能像之前單個文件自動轉碼成一個js文件一樣，也將多個ts文件自動轉碼到一個js文件中呢？當然還是可以的，全自動化的轉碼需要基於模塊來實現，這篇博客不會涉及，但是除了上面這種轉碼模式，Ts還有一種使用引入依賴文件的方式來實現，詳細請看下一節內容解析。

 三、多重命名空間與三斜杠指令引入依賴文件

 在解析引入依賴之前，這里補充以下多重命名空間。多重命名空間簡單的說就是嵌套的命名空間，然后采用對象屬性節點層次依賴的方式來實現。在前面的示例基礎上來展示：

//a.ts
namespace MyMath{ 
    export const PI = 3.14;
    export namespace MyMathA{ //使用多重命名空間
        export const strA = "This is namespace a.";
    }
}
//index.ts
console.log(MyMath.PI);//在外部使用命名空間
console.log(MyMath.sumValue(2,3));
console.log(MyMath.MyMathA.strA);//引用多重命名空間的內容

然后在執行轉碼操作：

tsc --outfile index.js a.ts b.ts index.ts

接着來看使用外部文件引用的方式如何實現多文件統一轉碼：

//index.ts
///<reference path="a.ts" />  //引入外部文件
///<reference path="b.ts" />  //引入外部文件

console.log(MyMath.PI);//在外部使用命名空間
console.log(MyMath.sumValue(2,3));
console.log(MyMath.MyMathA.strA);//引用多重命名空間的內容

通過“///<reference path="..." />”引入外部文件，這種引入外部文件的操作甚至可以引入jQuery庫，然后執行轉碼就相對比前面的轉碼方便一點點：

tsc index.ts --outFile index.js

使用引入外部文件統一轉碼的方式要注意指令outFile（注意大寫的F），然后引入的文件就不需要在執行轉碼指令的時候寫到命令中了，而只需要直接對index.js這個入口文件執行轉碼操作即可。（不過引入外部文件或者執行outfile打包時最好依次按照依賴順序書寫，不按照順序的方式我沒有測試過，不知道會不會有影響，但是這里我們需要考慮js是單線程的執行模式，所以以防轉碼失敗最好還是按照依賴順序來寫）。