TypeScript - Módulos

Um módulo é projetado com a ideia de organizar o código escrito em TypeScript. Os módulos são amplamente divididos em -

Módulos Internos
Módulos Externos

Módulo Interno

Módulos internos vieram em versões anteriores do Typescript. Isso foi usado para agrupar logicamente classes, interfaces, funções em uma unidade e pode ser exportado em outro módulo. Este agrupamento lógico é denominado namespace na versão mais recente do TypeScript. Portanto, os módulos internos estão obsoletos, em vez disso, podemos usar o namespace. Módulos internos ainda são suportados, mas é recomendado usar namespace em vez de módulos internos.

Sintaxe do módulo interno (antigo)

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

Sintaxe de namespace (novo)

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

JavaScript gerado em ambos os casos é o mesmo

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

Módulo Externo

Módulos externos no TypeScript existem para especificar e carregar dependências entre vários jsarquivos. Se houver apenas umjsarquivo usado, então os módulos externos não são relevantes. Tradicionalmente, o gerenciamento de dependência entre arquivos JavaScript era feito usando tags de script de navegador (<script> </script>). Mas isso não é extensível, pois é muito linear ao carregar os módulos. Isso significa que, em vez de carregar arquivos um após o outro, não há opção assíncrona para carregar módulos. Quando você está programando js para o servidor, por exemplo NodeJs, você nem tem tags de script.

Existem dois cenários para carregar dependentes js arquivos de um único arquivo JavaScript principal.

Lado do cliente - RequireJs
Lado do servidor - NodeJs

Selecionando um carregador de módulo

Para suportar o carregamento de arquivos JavaScript externos, precisamos de um carregador de módulo. Este será outrojsbiblioteca. Para navegador, a biblioteca mais comum usada é RequieJS. Esta é uma implementação da especificação AMD (Asynchronous Module Definition). Em vez de carregar arquivos um após o outro, a AMD pode carregá-los todos separadamente, mesmo quando eles são dependentes uns dos outros.

Definindo Módulo Externo

Ao definir o módulo externo em TypeScript visando CommonJS ou AMD, cada arquivo é considerado um módulo. Portanto, é opcional usar módulo interno com módulo externo.

Se você estiver migrando o TypeScript de AMD para sistemas de módulo CommonJs, não há trabalho adicional necessário. A única coisa que você precisa alterar é apenas o sinalizador do compilador Ao contrário do JavaScript, há uma sobrecarga na migração de CommonJs para AMD ou vice-versa.

A sintaxe para declarar um módulo externo está usando as palavras-chave 'export' e 'import'.

Sintaxe

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

Para usar o módulo declarado em outro arquivo, uma palavra-chave import é usada conforme fornecido abaixo. O nome do arquivo é apenas especificado sem extensão usada.

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

Exemplo

Vamos entender isso usando um exemplo.

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

O comando para compilar o arquivo TypeScript principal para sistemas AMD é -

tsc --module amd TestShape.ts

Na compilação, ele irá gerar o seguinte código JavaScript para AMD.

Arquivo: IShape.js

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

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

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

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

O comando para compilar o arquivo TypeScript principal para Commonjs sistemas é

tsc --module commonjs TestShape.ts

Na compilação, ele irá gerar o seguinte código JavaScript para Commonjs.

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

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

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

Resultado

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