TypeScript - Módulos

Un módulo está diseñado con la idea de organizar el código escrito en TypeScript. Los módulos se dividen ampliamente en:

Módulos internos
Módulos externos

Módulo interno

Los módulos internos venían en una versión anterior de Typecript. Esto se utilizó para agrupar lógicamente clases, interfaces, funciones en una unidad y se puede exportar en otro módulo. Esta agrupación lógica se denomina espacio de nombres en la última versión de TypeScript. Entonces, los módulos internos están obsoletos en su lugar, podemos usar el espacio de nombres. Los módulos internos aún son compatibles, pero se recomienda usar el espacio de nombres sobre los módulos internos.

Sintaxis del módulo interno (antiguo)

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

Sintaxis del espacio de nombres (nuevo)

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

JavaScript generado en ambos casos es el mismo

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

Módulo externo

Los módulos externos en TypeScript existen para especificar y cargar dependencias entre múltiples jsarchivos. Si solo hay unojsarchivo utilizado, los módulos externos no son relevantes. Tradicionalmente, la gestión de dependencias entre archivos JavaScript se realizaba mediante etiquetas de script del navegador (<script> </script>). Pero eso no es extensible, ya que es muy lineal al cargar módulos. Eso significa que en lugar de cargar archivos uno tras otro, no hay una opción asincrónica para cargar módulos. Cuando está programando js para el servidor, por ejemplo, NodeJs, ni siquiera tiene etiquetas de script.

Hay dos escenarios para cargar dependientes js archivos de un único archivo JavaScript principal.

Lado del cliente - RequireJs
Lado del servidor: NodeJs

Selección de un cargador de módulos

Para admitir la carga de archivos JavaScript externos, necesitamos un cargador de módulos. Este sera otrojsbiblioteca. Para el navegador, la biblioteca más utilizada es RequieJS. Esta es una implementación de la especificación AMD (Definición de módulo asíncrono). En lugar de cargar archivos uno tras otro, AMD puede cargarlos todos por separado, incluso cuando dependen unos de otros.

Definición de módulo externo

Al definir un módulo externo en TypeScript dirigido a CommonJS o AMD, cada archivo se considera un módulo. Por lo tanto, es opcional usar un módulo interno con un módulo externo.

Si está migrando TypeScript de AMD a sistemas de módulos CommonJs, no es necesario ningún trabajo adicional. Lo único que necesita cambiar es solo el indicador del compilador. A diferencia de JavaScript, hay una sobrecarga en la migración de CommonJs a AMD o viceversa.

La sintaxis para declarar un módulo externo utiliza las palabras clave 'exportar' e 'importar'.

Sintaxis

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

Para usar el módulo declarado en otro archivo, se usa una palabra clave de importación como se indica a continuación. El nombre del archivo solo se especifica sin extensión.

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

Ejemplo

Entendamos esto usando un ejemplo.

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

El comando para compilar el archivo TypeScript principal para sistemas AMD es:

tsc --module amd TestShape.ts

Al compilar, generará el siguiente código JavaScript para AMD.

Archivo: IShape.js

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

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

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

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

El comando para compilar el archivo principal de TypeScript para Commonjs sistemas es

tsc --module commonjs TestShape.ts

Al compilar, generará el siguiente código JavaScript para Commonjs.

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

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

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

Salida

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

↰ Previous page Next page ↱