TypeScript - Espaces de noms

Un espace de noms est un moyen de regrouper logiquement du code associé. Ceci est intégré à TypeScript contrairement à JavaScript où les déclarations de variables entrent dans une portée globale et si plusieurs fichiers JavaScript sont utilisés dans le même projet, il y aura possibilité d'écraser ou de mal interpréter les mêmes variables, ce qui conduira au «problème de pollution globale des espaces de noms» dans JavaScript.

Définition d'un espace de noms

Une définition d'espace de noms commence par le mot-clé namespace suivi du nom de l'espace de noms comme suit -

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

Les classes ou interfaces auxquelles il faut accéder en dehors de l'espace de noms doivent être marquées d'un mot-clé export.

Pour accéder à la classe ou à l'interface dans un autre espace de noms, la syntaxe sera namespaceName.className

SomeNameSpaceName.SomeClassName;

Si le premier espace de noms se trouve dans un fichier TypeScript distinct, il doit être référencé à l'aide de la syntaxe de référence triple barre oblique.

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

Le programme suivant montre l'utilisation des espaces de noms -

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

Le code ci-dessus peut être compilé et exécuté à l'aide de la commande suivante -

tsc --out app.js TestShape.ts  

node app.js

Lors de la compilation, il générera le code JavaScript suivant (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());

Lorsque le code ci-dessus est compilé et exécuté, il produit le résultat suivant -

Circle is drawn 
Triangle is drawn

Espaces de noms imbriqués

Vous pouvez définir un espace de noms dans un autre espace de noms comme suit -

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

Vous pouvez accéder aux membres de l'espace de noms imbriqué en utilisant l'opérateur point (.) Comme suit -

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