TypeScript 教程
1. TypeScript 教程 2. TypeScript 安装 3. TypeScript 基础语法 4. TypeScript 基础类型 5. TypeScript 变量声明 6. TypeScript 条件语句 7. TypeScript 循环 8. TypeScript Number 9. TypeScript String(字符串) 10. TypeScript Array(数组) 11. TypeScript 元组 12. TypeScript 联合类型 13. TypeScript 接口 14. TypeScript 对象 15. TypeScript 命名空间 16. TypeScript 模块 17. TypeScript 声明文件

TypeScript 命名空间

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 { export namespace invoiceApp { export class Invoice { public calculateDiscount(price: number) { return price * .40; } } } }

InvoiceTest.ts 文件代码:

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

使用 tsc 命令编译以上代码:

tsc --out app.js InvoiceTest.ts

得到以下 JavaScript 代码:

JavaScript

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

使用 node 命令查看输出结果为:

$ node app.js

200