TypeScript - moduły

Moduł został zaprojektowany z myślą o organizowaniu kodu napisanego w języku TypeScript. Moduły są zasadniczo podzielone na -

• Moduły wewnętrzne
• Moduły zewnętrzne

Moduł wewnętrzny

Moduły wewnętrzne pojawiły się we wcześniejszej wersji Typescript. Służyło to do logicznego grupowania klas, interfejsów, funkcji w jedną jednostkę i może być eksportowane do innego modułu. Ta logiczna grupa nosi nazwę przestrzeni nazw w najnowszej wersji języka TypeScript. Więc moduły wewnętrzne są przestarzałe, zamiast tego możemy użyć przestrzeni nazw. Moduły wewnętrzne są nadal obsługiwane, ale zaleca się używanie przestrzeni nazw zamiast modułów wewnętrznych.

Składnia modułu wewnętrznego (stara)

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

Składnia przestrzeni nazw (nowa)

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

JavaScript wygenerowany w obu przypadkach jest taki sam

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

Moduł zewnętrzny

Zewnętrzne moduły w języku TypeScript istnieją do określania i ładowania zależności między wieloma zewnętrznymi jsakta. Jeśli jest tylko jedenjsużywany plik, wtedy moduły zewnętrzne nie są istotne. Tradycyjnie zarządzanie zależnościami między plikami JavaScript odbywało się za pomocą tagów skryptów przeglądarki (<script> </script>). Ale to nie jest rozszerzalne, ponieważ jest bardzo liniowe podczas ładowania modułów. Oznacza to, że zamiast ładowania plików jeden po drugim nie ma asynchronicznej opcji ładowania modułów. Kiedy programujesz js dla serwera, na przykład NodeJ, nie masz nawet tagów skryptów.

Istnieją dwa scenariusze ładowania zależności js pliki z jednego głównego pliku JavaScript.

• Strona klienta - RequireJs
• Strona serwera - NodeJs

Wybieranie modułu ładującego

Aby obsługiwać ładowanie zewnętrznych plików JavaScript, potrzebujemy modułu ładującego. To będzie innajsbiblioteka. W przypadku przeglądarki najczęściej używaną biblioteką jest RequieJS. Jest to implementacja specyfikacji AMD (Asynchronous Module Definition). Zamiast ładować pliki jeden po drugim, AMD może załadować je wszystkie osobno, nawet jeśli są od siebie zależne.

Definiowanie modułu zewnętrznego

Podczas definiowania modułu zewnętrznego w języku TypeScript dla CommonJS lub AMD każdy plik jest traktowany jako moduł. Dlatego opcjonalne jest użycie modułu wewnętrznego w module zewnętrznym.

Jeśli przeprowadzasz migrację TypeScript z systemów AMD do modułów CommonJs, nie jest wymagana żadna dodatkowa praca. Jedyną rzeczą, którą musisz zmienić, jest tylko flaga kompilatora W przeciwieństwie do JavaScript, migracja z CommonJs do AMD i odwrotnie wiąże się z dodatkowymi kosztami.

Składnia deklarowania modułu zewnętrznego wykorzystuje słowo kluczowe „eksport” i „import”.

Składnia

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

Aby użyć zadeklarowanego modułu w innym pliku, używane jest słowo kluczowe import, jak podano poniżej. Nazwa pliku jest określona tylko bez użycia rozszerzenia.

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

Przykład

Zrozummy to na przykładzie.

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

Polecenie kompilacji głównego pliku TypeScript dla systemów AMD to -

tsc --module amd TestShape.ts

Podczas kompilacji wygeneruje następujący kod JavaScript dla AMD.

Plik: IShape.js

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

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

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

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

Polecenie służące do kompilowania głównego pliku TypeScript dla Commonjs systemy są

tsc --module commonjs TestShape.ts

Podczas kompilacji wygeneruje następujący kod JavaScript dla Commonjs.

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

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

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

Wynik

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