TypeScript: espacios de nombres

Un espacio de nombres es una forma de agrupar lógicamente el código relacionado. Esto está incorporado en TypeScript a diferencia de JavaScript, donde las declaraciones de variables entran en un alcance global y si se utilizan varios archivos JavaScript dentro del mismo proyecto, habrá posibilidad de sobrescribir o mal interpretar las mismas variables, lo que conducirá al "problema de contaminación del espacio de nombres global" en JavaScript.

Definición de un espacio de nombres

Una definición de espacio de nombres comienza con la palabra clave namespace seguido del nombre del espacio de nombres de la siguiente manera:

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

Las clases o interfaces a las que se debe acceder fuera del espacio de nombres deben marcarse con la palabra clave export.

Para acceder a la clase o interfaz en otro espacio de nombres, la sintaxis será nombre de espacio de nombres.nombre de clase

SomeNameSpaceName.SomeClassName;

Si el primer espacio de nombres está en un archivo TypeScript separado, entonces se debe hacer referencia a él usando la sintaxis de referencia de triple barra.

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

El siguiente programa demuestra el uso de espacios de nombres:

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

El código anterior se puede compilar y ejecutar usando el siguiente comando:

tsc --out app.js TestShape.ts  

node app.js

Al compilar, generará el siguiente código JavaScript (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());

Cuando se compila y ejecuta el código anterior, produce el siguiente resultado:

Circle is drawn 
Triangle is drawn

Espacios de nombres anidados

Puede definir un espacio de nombres dentro de otro espacio de nombres de la siguiente manera:

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

Puede acceder a los miembros del espacio de nombres anidado mediante el operador de punto (.) De la siguiente manera:

FileName : Invoice.ts  
namespace tutorialPoint { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
} 
FileName: InvoiceTest.ts 

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

El código anterior se puede compilar y ejecutar usando el siguiente comando:

tsc --out app.js InvoiceTest.ts 
node app.js

Al compilar, generará el siguiente código JavaScript (app.js).

//Generated by typescript 1.8.10
var tutorialPoint;
(function (tutorialPoint) {
   var invoiceApp;
   (function (invoiceApp) {
      var Invoice = (function () {
         function Invoice() {
         }
         Invoice.prototype.calculateDiscount = function (price) {
            return price * .40;
         };
         return Invoice;
      }());
      invoiceApp.Invoice = Invoice;
   })(invoiceApp = tutorialPoint.invoiceApp || (tutorialPoint.invoiceApp = {}));
	
})(tutorialPoint || (tutorialPoint = {}));
/// <reference path = "Invoice.ts" />

var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

Cuando se compila y ejecuta el código anterior, produce el siguiente resultado:

200