TypeScript - Module

Ein Modul wurde mit der Idee entwickelt, in TypeScript geschriebenen Code zu organisieren. Module sind grob unterteilt in -

Interne Module
Externe Module

Internes Modul

Interne Module wurden in einer früheren Version von Typescript bereitgestellt. Dies wurde verwendet, um Klassen, Schnittstellen und Funktionen logisch in einer Einheit zu gruppieren und kann in ein anderes Modul exportiert werden. Diese logische Gruppierung wird in der neuesten Version von TypeScript als Namespace bezeichnet. Interne Module sind also veraltet, stattdessen können wir den Namespace verwenden. Interne Module werden weiterhin unterstützt, es wird jedoch empfohlen, den Namespace gegenüber internen Modulen zu verwenden.

Interne Modulsyntax (alt)

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

Namespace-Syntax (neu)

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

In beiden Fällen generiertes JavaScript ist gleich

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

Externes Modul

Externe Module in TypeScript sind vorhanden, um Abhängigkeiten zwischen mehreren externen Modulen anzugeben und zu laden jsDateien. Wenn es nur einen gibtjsDatei verwendet, dann sind externe Module nicht relevant. Traditionell wurde das Abhängigkeitsmanagement zwischen JavaScript-Dateien mithilfe von Browser-Skript-Tags (<script> </ script>) durchgeführt. Dies ist jedoch nicht erweiterbar, da es beim Laden von Modulen sehr linear ist. Das heißt, anstatt Dateien nacheinander zu laden, gibt es keine asynchrone Option zum Laden von Modulen. Wenn Sie js für den Server programmieren, zum Beispiel NodeJs, haben Sie nicht einmal Skript-Tags.

Es gibt zwei Szenarien zum Laden von Abhängigen js Dateien aus einer einzelnen JavaScript-Hauptdatei.

Client-Seite - Erforderlich
Serverseite - NodeJs

Modullader auswählen

Um das Laden externer JavaScript-Dateien zu unterstützen, benötigen wir einen Modullader. Dies wird eine andere seinjsBibliothek. Für Browser wird am häufigsten RequieJS verwendet. Dies ist eine Implementierung der AMD-Spezifikation (Asynchronous Module Definition). Anstatt Dateien nacheinander zu laden, kann AMD sie alle separat laden, auch wenn sie voneinander abhängig sind.

Externes Modul definieren

Bei der Definition eines externen Moduls in TypeScript für CommonJS oder AMD wird jede Datei als Modul betrachtet. Daher ist es optional, ein internes Modul mit einem externen Modul zu verwenden.

Wenn Sie TypeScript von AMD auf CommonJs-Modulsysteme migrieren, ist keine zusätzliche Arbeit erforderlich. Das einzige, was Sie ändern müssen, ist nur das Compiler-Flag. Anders als in JavaScript ist die Migration von CommonJs zu AMD oder umgekehrt mit einem Mehraufwand verbunden.

Die Syntax zum Deklarieren eines externen Moduls verwendet die Schlüsselwörter 'export' und 'import'.

Syntax

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

Um das deklarierte Modul in einer anderen Datei zu verwenden, wird ein Importschlüsselwort wie unten angegeben verwendet. Der Dateiname wird nur angegeben, keine Erweiterung verwendet.

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

Beispiel

Lassen Sie uns dies anhand eines Beispiels verstehen.

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

Der Befehl zum Kompilieren der TypeScript-Hauptdatei für AMD-Systeme lautet:

tsc --module amd TestShape.ts

Beim Kompilieren wird der folgende JavaScript-Code für AMD generiert.

Datei: IShape.js

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

Datei: 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;
});

Datei: 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;
});

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

Der Befehl zum Kompilieren der TypeScript-Hauptdatei für Commonjs Systeme ist

tsc --module commonjs TestShape.ts

Beim Kompilieren wird folgender JavaScript-Code für generiert Commonjs.

Datei: 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;

Datei: 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;

Datei: 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());

Ausgabe

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