Namespaces

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

A namespace definition begins with the keyword namespace followed by the namespace name as follows −

namespace SomeNameSpaceName {exportinterfaceISomeInterfaceName{}exportclassSomeClassName{}}

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 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 {exportinterfaceIShape{draw();}}  

FileName :Circle.ts 
----------/// <reference path = "IShape.ts" /> namespace Drawing {exportclassCircleimplementsIShape{publicdraw(){console.log("Circle is drawn");}  
  
  FileName :Triangle.ts 
  ----------/// &lt;reference path = "IShape.ts" /&gt; namespace Drawing {exportclassTriangleimplementsIShape{publicdraw(){console.log("Triangle is drawn");}} 
     
     FileName : TestShape.ts 
     /// &lt;reference path = "IShape.ts" /&gt;   /// &lt;reference path = "Circle.ts" /&gt; /// &lt;reference path = "Triangle.ts" /&gt;  functiondrawAllShapes(shape:Drawing.IShape){ 
        shape.draw();}drawAllShapes(newDrawing.Circle());drawAllShapes(newDrawing.Triangle());}}}</code></pre>


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 following JavaScript code(app.js).



//Generated by typescript 1.8.10/// <reference path = "IShape.ts" />var Drawing;(function(Drawing){var Circle =(function(){functionCircle(){}
  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(){functionTriangle(){}
  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" />functiondrawAllShapes(shape){
   shape.draw();}drawAllShapes(newDrawing.Circle());drawAllShapes(newDrawing.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 {exportnamespace namespace_name2 {exportclassclass_name{}}}



You can access members of nested namespace by using the dot (.) operator as follows −



FileName : Invoice.ts  
namespace tutorialPoint {exportnamespace invoiceApp {exportclassInvoice{publiccalculateDiscount(price:number){return price *.40;}}}} 
FileName: InvoiceTest.ts 

/// <reference path = "Invoice.ts" />var invoice =newtutorialPoint.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 following JavaScript code(app.js).



//Generated by typescript 1.8.10var tutorialPoint;(function(tutorialPoint){var invoiceApp;(function(invoiceApp){var Invoice =(function(){functionInvoice(){}
     Invoice.prototype.calculateDiscount=function(price){return price *.40;};return Invoice;}());
  invoiceApp.Invoice = Invoice;})(invoiceApp = tutorialPoint.invoiceApp ||(tutorialPoint.invoiceApp ={}));})(tutorialPoint ||(tutorialPoint ={}));/// &lt;reference path = "Invoice.ts" /&gt;var invoice =newtutorialPoint.invoiceApp.Invoice();console.log(invoice.calculateDiscount(500));</code></pre>


When the above code is compiled and executed, it produces the following result −



200