web前端开发个人技术博客
当前位置: TypeScript > TypeScript 命名空间

TypeScript 命名空间

2019-07-16 分类:TypeScript 作者:码云 阅读(311)

关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块”,这是为了与ECMAScript 2015里的术语保持一致,(也就是说 module X { 相当于现在推荐的写法 namespace X {)。

这篇文章描述了如何在TypeScript里使用命名空间(之前叫做“内部模块”)来组织你的代码。 就像我们在术语说明里提到的那样,“内部模块”现在叫做“命名空间”。 另外,任何使用module关键字来声明一个内部模块的地方都应该使用namespace关键字来替换。 这就避免了让新的使用者被相似的名称所迷惑。

TypeScript 教程

TypeScript 命名空间

命名空间一个最明确的目的就是解决重名问题。

假设这样一种情况,当一个班上有两个名叫小明的学生时,为了明确区分它们,我们在使用名字之外,不得不使用一些额外的信息,比如他们的姓(王小明,李小明),或者他们父母的名字等等。

命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的。这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中。

TypeScript 中命名空间使用 namespace 来定义,语法格式如下:

1
2
3
4
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}

以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类类和接口,则需要在类和接口添加 export 关键字。

要在另外一个命名空间调用语法格式为:

1
SomeNameSpaceName.SomeClassName;

如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:

1
///

以下实例演示了命名空间的使用,定义在不同文件中:

IShape.ts 文件代码:

1
2
3
4
5
namespace Drawing {
export interface IShape {
draw();
}
}

Circle.ts 文件代码:

1
2
3
4
5
6
7
8
///
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
}
}

Triangle.ts 文件代码:

1
2
3
4
5
6
7
8
///
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
}

TestShape.ts 文件代码:

1
2
3
4
5
6
7
8
///
///
///
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
///
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 = {}));
///
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 = {}));
///
///
///
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 { }
}
}

成员的访问使用点号 . 来实现,如下实例:

Invoice.ts 文件代码:

1
2
3
4
5
6
7
8
9
namespace Mybj{
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}

InvoiceTest.ts 文件代码:

1
2
3
///
var invoice = new Mybj.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 Mybj;
(function (Mybj) {
var invoiceApp;
(function (invoiceApp) {
var Invoice = /** @class */ (function () {
function Invoice() {
}
Invoice.prototype.calculateDiscount = function (price) {
return price * .40;
};
return Invoice;
}());
invoiceApp.Invoice = Invoice;
})(invoiceApp = Mybj.invoiceApp || (Mybj.invoiceApp = {}));
})(Mybj|| (Mybj= {}));
///
var invoice = new Mybj.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

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

1
2
$ node app.js
200

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - TypeScript 命名空间

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论