TypeScript學習筆記（八）：1.5版本以後的模塊和命名空間

我以前有寫過TS1.5版本以前的「模塊」的筆記：TypeScript學習筆記（七）：模塊

可是TS這裏的模塊和在ECMAScript 2015裏的模塊（即JS原生支持了模塊的概念）機率出現了混淆，因此在1.5的版本里，爲了與ECMAScript 2015裏的術語保持一致，「內部模塊」如今稱作「命名空間」，「外部模塊」如今則簡稱爲「模塊」。

下面摘錄自Egret博客的一段詳細解釋（鏈接）：

大致意思就是 TS1.5 之後，推薦全面使用namespace關鍵字代替module。由於JS裏自己就有module的概念，並且已是ES6標準裏的關鍵字，各類加載框架好比CommonJS，AMD等也都有module的概念，可是TS裏以前的module關鍵字與他們都不太相同。因此換了一個關鍵字加以區分，避免形成概念上的混淆。實際語法上，使用namespace等價於TS之前使用的module，而後推薦代碼中不要再出現module關鍵字，這個關鍵字基本上變成了一個編譯後和運行時裏的概念，留給純JS中使用。

若是要用一句話解釋TS裏的namespace與JS裏module的區別，那主要在於文件上：TS裏的namespace是跨文件的，JS裏的module是以文件爲單位的，一個文件一個module。

TS裏的namespace主要是解決命名衝突的問題，會在全局生成一個對象，定義在namespace內部的類都要經過這個對象的屬性訪問，例如 egret.DisplayObject,egret就是namespace的對象，DisplayObject則是那個類名。由於是註冊到全局的，因此跨文件也能正常使用，不一樣的文件可以讀取其餘文件註冊在全局的命名空間內的信息，也能夠註冊本身的。namespace其實比較像其餘面向對象編程語言裏包名的概念。

而JS裏的module，主要是解決加載依賴關係的。跟文件綁定在一塊兒，一個文件就是一個module。在一個文件中訪問另外一個文件必需要加載另外一個文件。在NodeJS裏是用CommonJS處理模塊加載，由於是運行在本地，因此能夠同步加載，寫起來也比較方便。用到一個文件就require它一下，做爲一個變量。而在Web端的RequireJS使用的是AMD處理模塊加載，是異步的。其實就是把全部代碼寫在回調裏，先去異步加載依賴的全部文件。

因此能夠簡單的理解，namespace的概念等同於包名，module的概念等同於文件。

下面咱們來分別看看。

命名空間

把以前的module關鍵字換成namespace關鍵字便可，使用方法和功能都不變，相似Java的包或C#的命名空間。固然，不替換或者繼續使用module關鍵字也是能夠的，可是會出現概念混淆的狀況，最好按照官方的說法，統一使用namespace吧，包括*.d.ts文件。

另外對於存在依賴關係的文件，仍然可使用：

/// <reference path="SimpleWebSocket.ts"/>

方式來指定當前文件依賴的其它文件。

模塊

TS中，對模塊也是支持的，若是對JS的模塊不熟悉能夠查看這篇筆記。

使用什麼標準

咱們知道JS中模塊有多種標準，通常經常使用的有兩種，針對Node.js同步加載的CommonJS，和針對瀏覽器異步加載的AMD，在TS項目中，有一個tsconfig.json的文件，通常以下：

 1 {
 2   "compilerOptions": {
 3     "module": "commonjs",
 4     "target": "es5",
 5     "sourceMap": true
 6   },
 7   "exclude": [
 8     "node_modules"
 9   ]
10 }

其中的module表示模塊使用的標準，默認是CommonJS標準。

TS模塊代碼

模塊代碼，Utils.ts：

 1 export const version: number = 0.1;
 2 
 3 export class Utils {
 4     static add(a: number, b: number): number {
 5         return a + b;
 6     }
 7 
 8     private _name: string;
 9 
10     constructor(name: string) {
11         this._name = name;
12     }
13 
14     sayHi(): void {
15         console.log("Hi, I am " + this._name);
16     }
17 }

注意不要使用module或namespace進行包含，直接使用export導出即表示要導出到外部能夠訪問的對象。

使用模塊代碼，App.ts：

1 import * as utils from "./Utils";
2 
3 console.log(utils.version);
4 
5 var obj = new utils.Utils("Li Lei");
6 obj.sayHi();

使用TS的導入寫法便可，詳情點擊這裏。

CommonJS編譯後的代碼

Utils.js：

 1 "use strict";
 2 Object.defineProperty(exports, "__esModule", { value: true });
 3 exports.version = 0.1;
 4 var Utils = (function () {
 5     function Utils(name) {
 6         this._name = name;
 7     }
 8     Utils.add = function (a, b) {
 9         return a + b;
10     };
11     Utils.prototype.sayHi = function () {
12         console.log("Hi, I am " + this._name);
13     };
14     return Utils;
15 }());
16 exports.Utils = Utils;

App.js：

1 "use strict";
2 Object.defineProperty(exports, "__esModule", { value: true });
3 var utils = require("./Utils");
4 console.log(utils.version);
5 var obj = new utils.Utils("Li Lei");
6 obj.sayHi();

上面生成的代碼能夠在Node.js中使用。

AMD編譯後的代碼

先修改tsconfig.json以下：

 1 {
 2   "compilerOptions": {
 3     "module": "amd",
 4     "target": "es5",
 5     "sourceMap": true
 6   },
 7   "exclude": [
 8     "node_modules"
 9   ]
10 }

編譯以後，Utils.js：

 1 define(["require", "exports"], function (require, exports) {
 2     "use strict";
 3     Object.defineProperty(exports, "__esModule", { value: true });
 4     exports.version = 0.1;
 5     var Utils = (function () {
 6         function Utils(name) {
 7             this._name = name;
 8         }
 9         Utils.add = function (a, b) {
10             return a + b;
11         };
12         Utils.prototype.sayHi = function () {
13             console.log("Hi, I am " + this._name);
14         };
15         return Utils;
16     }());
17     exports.Utils = Utils;
18 });

App.js：

1 define(["require", "exports", "./Utils"], function (require, exports, utils) {
2     "use strict";
3     Object.defineProperty(exports, "__esModule", { value: true });
4     console.log(utils.version);
5     var obj = new utils.Utils("Li Lei");
6     obj.sayHi();
7 });

上面的代碼能夠在瀏覽器中使用，注意要引入require.js庫就行。