TypeScript 名稱空間

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

假設這樣一種情況,當一個班上有兩個名叫小明的學生時,為了明確區分它們,我們在使用名字之外,不得不使用一些額外的資訊,比如他們的姓(王小明,李小明),或者他們父母的名字等等。

名稱空間定義了識別符號的可見範圍,一個識別符號可在多個名字空間中定義,它在不同名字空間中的含義是互不相干的。這樣,在一個新的名字空間中可定義任何識別符號,它們不會與任何已有的識別符號發生衝突,因為已有的定義都處於其他名字空間中。

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

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

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

要在另外一個名稱空間呼叫語法格式為:

SomeNameSpaceName.SomeClassName;

如果一個名稱空間在一個單獨的 TypeScript 檔案中,則應使用三斜槓 /// 引用它,語法格式如下:

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

以下例項演示了名稱空間的使用,定義在不同檔案中:

IShape.ts 檔案程式碼:

namespace Drawing { export interface IShape { draw(); } }

Circle.ts 檔案程式碼:

/// <reference path = "IShape.ts" /> namespace Drawing { export class Circle implements IShape { public draw() { console.log("Circle is drawn"); } } }

Triangle.ts 檔案程式碼:

/// <reference path = "IShape.ts" /> namespace Drawing { export class Triangle implements IShape { public draw() { console.log("Triangle is drawn"); } } }

TestShape.ts 檔案程式碼:

/// <reference path = "IShape.ts" /> /// <reference path = "Circle.ts" /> /// <reference path = "Triangle.ts" /> function drawAllShapes(shape:Drawing.IShape) { shape.draw(); } drawAllShapes(new Drawing.Circle()); drawAllShapes(new Drawing.Triangle());

使用 tsc 命令編譯以上程式碼:

tsc --out app.js TestShape.ts  

得到以下 JavaScript 程式碼:

JavaScript

/// <reference path = "IShape.ts" /> var Drawing; (function (Drawing) { var Circle = /** @class */ (function () { function Circle() { } Circle.prototype.draw = function () { console.log("Circle is drawn"); }; return Circle; }()); Drawing.Circle = Circle; })(Drawing || (Drawing = {})); /// <reference path = "IShape.ts" /> var Drawing; (function (Drawing) { var Triangle = /** @class */ (function () { function Triangle() { } Triangle.prototype.draw = function () { console.log("Triangle is drawn"); }; return Triangle; }()); Drawing.Triangle = Triangle; })(Drawing || (Drawing = {})); /// <reference path = "IShape.ts" /> /// <reference path = "Circle.ts" /> /// <reference path = "Triangle.ts" /> function drawAllShapes(shape) { shape.draw(); } drawAllShapes(new Drawing.Circle()); drawAllShapes(new Drawing.Triangle());

使用 node 命令檢視輸出結果為:

$ node app.js
Circle is drawn
Triangle is drawn

巢狀名稱空間

名稱空間支援巢狀,即你可以將名稱空間定義在另外一個名稱空間裡頭。

namespace namespace_name1 { export namespace namespace_name2 { export class class_name { } } }

成員的訪問使用點號 . 來實現,如下例項:

Invoice.ts 檔案程式碼:

namespace itread01 { export namespace invoiceApp { export class Invoice { public calculateDiscount(price: number) { return price * .40; } } } }

InvoiceTest.ts 檔案程式碼:

/// <reference path = "Invoice.ts" /> var invoice = new itread01.invoiceApp.Invoice(); console.log(invoice.calculateDiscount(500));

使用 tsc 命令編譯以上程式碼:

tsc --out app.js InvoiceTest.ts

得到以下 JavaScript 程式碼:

JavaScript

var itread01; (function (itread01) { var invoiceApp; (function (invoiceApp) { var Invoice = /** @class */ (function () { function Invoice() { } Invoice.prototype.calculateDiscount = function (price) { return price * .40; }; return Invoice; }()); invoiceApp.Invoice = Invoice; })(invoiceApp = itread01.invoiceApp || (itread01.invoiceApp = {})); })(itread01 || (itread01 = {})); /// <reference path = "Invoice.ts" /> var invoice = new itread01.invoiceApp.Invoice(); console.log(invoice.calculateDiscount(500));

使用 node 命令檢視輸出結果為:

$ node app.js
200