TypeScript Namespace

The most explicit purpose of a namespace is to solve the problem of duplicate names.

Suppose there is a situation where there are two students named Xiao Ming in a class. To clearly distinguish them, we have to use some additional information besides their names, such as their surnames (Wang Xiaoming, Li Xiaoming), or their parents' names, etc.

A namespace defines the visible scope of an identifier. An identifier can be defined in multiple namespaces, and its meanings in different namespaces are irrelevant to each other. Thus, any identifier can be defined in a new namespace, and they will not conflict with any existing identifiers, because the existing definitions are all in other namespaces.

In TypeScript, namespaces are defined usingnamespacethe following syntax:

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 from outside, we need to add theexportkeyword.

To call it in another namespace, the syntax format is:

SomeNameSpaceName.SomeClassName;

If a namespace is in a separate TypeScript file, it should be referenced using the triple-slash ///, and the syntax format is as follows:

/// <reference path = "SomeFileName.ts" />

The following examples demonstrate the use of namespaces, defined in different files:

IShape.ts file code:

namespace Drawing { export interface IShape { draw(); } }

Circle.ts file code:

/// <reference path = "IShape.ts" /> namespace Drawing { export class Circle implements IShape { public draw() { console.log("Circle is drawn"); } } }

Triangle.ts file code:

/// <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

Get 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 result:

$ node app.js
Circle is drawn
Triangle is drawn

Nested Namespaces

Namespaces support nesting, i.e., you can define a namespace inside another namespace.

namespace namespace_name1 { export namespace namespace_name2 { export class class_name { } } }

Access to members is done using a dot.to implement it, as in the following example:

Invoice.ts file code:

namespace Example { export namespace invoiceApp { export class Invoice { public calculateDiscount(price: number) { return price * .40; } } } }

InvoiceTest.ts file code:

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

Use the tsc command to compile the above code:

tsc --out app.js InvoiceTest.ts

Get the following JavaScript code:

JavaScript

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

Use the node command to view the output result:

$ node app.js
200
Other Extensions