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