A namespaces is a way to logically group related code. This is inbuilt into TypeScript unlike in JavaScript where variables declarations go into a global scope and if multiple JavaScript files are used within the same project there will be possibility of overwriting or misconstruing the same variables, which will lead to the “global namespace pollution problem” in JavaScript.
Defining a Namespace
A namespace definition begins with the keyword namespace followed by the namespace name as follows −
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
The classes or interfaces which should be accessed outside the namespace should be marked with keyword export.
To access the class or interface in another namespace, the syntax will be namespaceName.className
SomeNameSpaceName.SomeClassName;
If the first namespace is in a separate TypeScript file, then it should be referenced using triple-slash reference syntax.
/// <reference path = "SomeFileName.ts" />
The following program demonstrates use of namespaces −
FileName :IShape.ts
----------
namespace Drawing {
export interface IShape {
draw();
}
}
FileName :Circle.ts
----------
/// <reference path = "IShape.ts" />
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
FileName :Triangle.ts
----------
/// <reference path = "IShape.ts" />
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
FileName : 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());
}
}
}
The above code can be compiled and executed using the following command −
tsc --out app.js TestShape.ts node app.js
On compiling, it will generate the following JavaScript code(app.js).
//Generated by typescript 1.8.10
/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn");
};
return Circle;
}());
Drawing.Circle = Circle;
})(Drawing || (Drawing = {}));
/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
var Triangle = (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());
When the above code is compiled and executed, it produces the following result −
Circle is drawn Triangle is drawn
Nested Namespaces
You can define one namespace inside another namespace as follows −
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name { }
}
}
You can access members of the nested namespace by using the dot (.) operator as follows −
FileName : Invoice.ts
namespace adglob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}
FileName: InvoiceTest.ts
/// <reference path = "Invoice.ts" />
var invoice = new adglob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
The above code can be compiled and executed using the following command −
tsc --out app.js InvoiceTest.ts node app.js
On compiling, it will generate the following JavaScript code(app.js).
//Generated by typescript 1.8.10
var adglob;
(function (adglob) {
var invoiceApp;
(function (invoiceApp) {
var Invoice = (function () {
function Invoice() {
}
Invoice.prototype.calculateDiscount = function (price) {
return price * .40;
};
return Invoice;
}());
invoiceApp.Invoice = Invoice;
})(invoiceApp = adglob.invoiceApp || (adglob.invoiceApp = {}));
})(adglob || (adglob = {}));
/// <reference path = "Invoice.ts" />
var invoice = new adglob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
When the above code is compiled and executed, it produces the following result −
200
Next Topic:-Click Here