命名空间一个最明确的目的就是解决重名问题。
假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父母的名字等等。
命名空间定义了标识符的可见范围，一个标识符可在多个命名空间中定义，它在不同命名空间中的含义是互不相干的。这样，在一个新的命名空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他命名空间中。
TypeScript 中命名空间使用 namespace 来定义，语法格式如下：
|
1 2 3 4 |
namespace SomeNameSpaceName { export interface ISomeInterfaceName { } export class SomeClassName { } } |
以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字。
要在另外一个命名空间调用语法格式为：
|
1 |
SomeNameSpaceName.SomeClassName; |
如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：
|
1 |
/// <reference path = "SomeFileName.ts" /> |
以下实例演示了命名空间的使用，定义在不同文件中：
|
1 2 3 4 5 |
namespace Drawing { export interface IShape { draw(); } } |
|
1 2 3 4 5 6 7 8 |
/// <reference path = "IShape.ts" /> namespace Drawing { export class Circle implements IShape { public draw() { console.log("Circle is drawn"); } } } |
|
1 2 3 4 5 6 7 8 |
/// <reference path = "IShape.ts" /> namespace Drawing { export class Triangle implements IShape { public draw() { console.log("Triangle is drawn"); } } } |
|
1 2 3 4 5 6 7 8 |
/// <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 命令编译以上代码：
|
1 |
tsc --out app.js TestShape.ts |
得到以下 JavaScript 代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/// <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 命令查看输出结果为：
|
1 2 3 |
$ node app.js Circle is drawn Triangle is drawn |
命名空间支持嵌套，即你可以将命名空间定义在另外一个命名空间里头。
|
1 2 3 4 5 |
namespace namespace_name1 { export namespace namespace_name2 { export class class_name { } } } |
成员的访问使用点号 . 来实现，如下实例：
|
1 2 3 4 5 6 7 8 9 |
namespace Runoob { export namespace invoiceApp { export class Invoice { public calculateDiscount(price: number) { return price * .40; } } } } |
|
1 2 3 |
/// <reference path = "Invoice.ts" /> var invoice = new Runoob.invoiceApp.Invoice(); console.log(invoice.calculateDiscount(500)); |
使用 tsc 命令编译以上代码：
|
1 |
tsc --out app.js InvoiceTest.ts |
得到以下 JavaScript 代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var Runoob; (function (Runoob) { var invoiceApp; (function (invoiceApp) { var Invoice = /** @class */ (function () { function Invoice() { } Invoice.prototype.calculateDiscount = function (price) { return price * .40; }; return Invoice; }()); invoiceApp.Invoice = Invoice; })(invoiceApp = Runoob.invoiceApp || (Runoob.invoiceApp = {})); })(Runoob || (Runoob = {})); /// <reference path = "Invoice.ts" /> var invoice = new Runoob.invoiceApp.Invoice(); console.log(invoice.calculateDiscount(500)); |
使用 node 命令查看输出结果为：
|
1 2 |
$ node app.js 200 |
from:https://www.runoob.com/typescript/ts-namespace.html