TypeScript - Modules

Un module est conçu avec l'idée d'organiser le code écrit en TypeScript. Les modules sont globalement divisés en -

  • Modules internes
  • Modules externes

Module interne

Les modules internes sont venus dans la version antérieure de Typescript. Cela a été utilisé pour regrouper logiquement des classes, des interfaces, des fonctions dans une unité et peut être exporté dans un autre module. Ce regroupement logique est nommé namespace dans la dernière version de TypeScript. Les modules internes sont donc obsolètes à la place, nous pouvons utiliser un espace de noms. Les modules internes sont toujours pris en charge, mais il est recommandé d'utiliser l'espace de noms sur les modules internes.

Syntaxe du module interne (ancienne)

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}

Syntaxe de l'espace de noms (nouveau)

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}

Le JavaScript généré dans les deux cas est identique

var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));

Module externe

Des modules externes dans TypeScript existent pour spécifier et charger des dépendances entre plusieurs jsdes dossiers. S'il n'y en a qu'unjsutilisé, les modules externes ne sont pas pertinents. Traditionnellement, la gestion des dépendances entre les fichiers JavaScript était effectuée à l'aide de balises de script de navigateur (<script> </script>). Mais ce n'est pas extensible, car c'est très linéaire lors du chargement des modules. Cela signifie qu'au lieu de charger les fichiers les uns après les autres, il n'y a pas d'option asynchrone pour charger les modules. Lorsque vous programmez js pour le serveur, par exemple NodeJs, vous n'avez même pas de balises de script.

Il existe deux scénarios pour charger les personnes à charge js fichiers à partir d'un seul fichier JavaScript principal.

  • Côté client - RequireJs
  • Côté serveur - NodeJs

Sélection d'un chargeur de module

Pour prendre en charge le chargement de fichiers JavaScript externes, nous avons besoin d'un chargeur de module. Ce sera un autrejsbibliothèque. Pour le navigateur, la bibliothèque la plus couramment utilisée est RequieJS. Il s'agit d'une implémentation de la spécification AMD (Asynchronous Module Definition). Au lieu de charger les fichiers les uns après les autres, AMD peut les charger tous séparément, même lorsqu'ils sont dépendants les uns des autres.

Définition d'un module externe

Lors de la définition d'un module externe dans TypeScript ciblant CommonJS ou AMD, chaque fichier est considéré comme un module. Il est donc facultatif d'utiliser un module interne avec un module externe.

Si vous migrez TypeScript d'AMD vers des systèmes de modules CommonJs, aucun travail supplémentaire n'est nécessaire. La seule chose que vous devez changer est juste l'indicateur du compilateur. Contrairement à JavaScript, la migration de CommonJs vers AMD ou vice versa entraîne une surcharge.

La syntaxe pour déclarer un module externe utilise les mots-clés «export» et «import».

Syntaxe

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

Pour utiliser le module déclaré dans un autre fichier, un mot-clé import est utilisé comme indiqué ci-dessous. Le nom de fichier est uniquement spécifié sans extension utilisée.

import someInterfaceRef = require(“./SomeInterface”);

Exemple

Comprenons cela à l'aide d'un exemple.

// IShape.ts 
export interface IShape { 
   draw(); 
}

// Circle.ts 
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
} 

// Triangle.ts 
import shape = require("./IShape"); 
export class Triangle implements shape.IShape { 
   public draw() { 
      console.log("Triangle is drawn (external module)"); 
   } 
}
   
// TestShape.ts 
import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  

function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 

drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

La commande pour compiler le fichier TypeScript principal pour les systèmes AMD est -

tsc --module amd TestShape.ts

Lors de la compilation, il générera le code JavaScript suivant pour AMD.

Fichier: IShape.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

Fichier: Circle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Cirlce is drawn (external module)");
      };
      return Circle;
   })();
   exports.Circle = Circle;
});

Fichier: Triangle.js

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
   var Triangle = (function () {
      function Triangle() {
      }
      Triangle.prototype.draw = function () {
         console.log("Triangle is drawn (external module)");
      };
      return Triangle;
   })();
   exports.Triangle = Triangle;
});

Fichier: TestShape.js

//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"], 
   function (require, exports, circle, triangle) {
   
   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

La commande pour compiler le fichier TypeScript principal pour Commonjs les systèmes est

tsc --module commonjs TestShape.ts

Lors de la compilation, il générera le code JavaScript suivant pour Commonjs.

Fichier: Circle.js

//Generated by typescript 1.8.10
var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Cirlce is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

Fichier: Triangle.js

//Generated by typescript 1.8.10
var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;

Fichier: TestShape.js

//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

Production

Cirlce is drawn (external module)
Triangle is drawn (external module)