One of the most explicit purposes of namespaces in TypeScript is to solve the problem of duplicate names.
Assuming such a situation, when there are two students named Xiaoming in a class, in order to clearly distinguish them, we have to use some additional information besides the name, such as their last name (Wang Xiaoming, Li Xiaoming), Or their parents' names, etc.
The namespace defines the visible scope of the identifier. An identifier can be defined in multiple namespaces, and its meaning in different namespaces is irrelevant. In this way, any identifiers can be defined in a new namespace, and they will not conflict with any existing identifiers, because the existing definitions are in other namespaces.
Namespaces in TypeScript are defined using namespace, and the syntax is as follows:
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
The above defines a namespace SomeNameSpaceName, if we need to call the classes and interfaces in SomeNameSpaceName externally, we need to add the export keyword to the classes and interfaces.
To call in another namespace, the syntax format is:
SomeNameSpaceName.SomeClassName;
If a namespace is in a separate TypeScript file, it should be referenced with triple slashes ///, the syntax is as follows:
/// <reference path = "SomeFileName.ts" />
The following example demonstrates the use of namespaces, defined in different files:
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 file code:
/// <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());
Use the tsc command to compile the above code:
tsc --out app.js TestShape.ts
results in the following JavaScript code:
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());
Use the node command to view the output as:
$ node app.js
Circle is drawn
Triangle is drawn
Nested Namespaces
Namespaces support nesting, that is, you can define a namespace inside another namespace.
namespace namespace_name1 {
export namespace namespace_name2 { export class class_name { } } } Members are accessed using dots., as in the following example:
Invoice.ts file code:
namespace Runoob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}
InvoiceTest.ts file code:
/// <reference path = "Invoice .ts" />
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
Compile the above code using the tsc command:
tsc --out app.js InvoiceTest.ts
gets the following JavaScript code:
JavaScript
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));
Use the node command to view the output as:
$ node app.js
2