A namespace 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 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
Syntax:
namespace NameSpaceName {
export interface IInterfaceName {
//interface body
}
export class ClassName {
//class body
}
}
If the first namespace is in separate TypeScript file, then it should be referenced using triple slash reference syntax.
/// <reference path = "FileName.ts" />
Example:
File: Geometry/IShape.ts
namespace Geometry {
export interface IShape {
name:string
calcArea:()=>number
calcPerimeter:()=>number
draw:()=>void
}
}
File: Geometry/Rectangle.ts
/// <reference path = "IShape.ts" />
namespace Geometry {
export class Rectangle implements IShape {
name:string = "Rectangle"
width:number = 0
height:number = 0
public calcArea():number{
return this.width*this.height
}
public calcPerimeter():number{
return 2*(this.width+this.height)
}
public draw() {
console.log("Rectangle is drawn");
}
constructor(width:number,height:number){
this.width = width
this.height = height
}
}
}
File: Geometry/Test.ts
/// <reference path = "IShape.ts" />
/// <reference path = "Rectangle.ts" />
function drawAShape(shape:Geometry.IShape) {
shape.draw()
}
function calcAreaAShape(shape:Geometry.IShape) {
var area = shape.calcArea()
console.log("Area is: "+area)
}
var rectangle = new Geometry.Rectangle(100,200)
drawAShape(rectangle)
calcAreaAShape(rectangle)
Compile:
tsc --out app.js Test.ts
After compiling, we have file app.js
/// <reference path = "IShape.ts" />
var Geometry;
(function (Geometry) {
var Rectangle = /** @class */ (function () {
function Rectangle(width, height) {
this.name = "Rectangle";
this.width = 0;
this.height = 0;
this.width = width;
this.height = height;
}
Rectangle.prototype.calcArea = function () {
return this.width * this.height;
};
Rectangle.prototype.calcPerimeter = function () {
return 2 * (this.width + this.height);
};
Rectangle.prototype.draw = function () {
console.log("Rectangle is drawn");
};
return Rectangle;
}());
Geometry.Rectangle = Rectangle;
})(Geometry || (Geometry = {}));
/// <reference path = "IShape.ts" />
/// <reference path = "Rectangle.ts" />
function drawAShape(shape) {
shape.draw();
}
function calcAreaAShape(shape) {
var area = shape.calcArea();
console.log("Area is: " + area);
}
var rectangle = new Geometry.Rectangle(100, 200);
drawAShape(rectangle);
calcAreaAShape(rectangle);
Run code: node app.js
Result:
Rectangle is drawn Area is: 20000
Nested Namespaces
You can define one namespace inside another namespace as follows:
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name {
//class body
}
}
}
