Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de TypeScript: Lección 16 - Módulo

Para organizar el código, TypeScript usa module.

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 y 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 son 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)

1
2
3
4
5
module MathModule {
   export function add(x:number, y:number) { 
      console.log(x+y);
   }
}

Sintaxis del espacio de nombres (nuevo)

1
2
3
namespace MathModule {
   export function add(x:number, y:number) { console.log(x + y);}
}

Después de compilar:

1
2
3
4
5
6
7
8
"use strict";
var MathModule;
(function (MathModule) {
    function add(x, y) {
        console.log(x + y);
    }
    MathModule.add = add;
})(MathModule || (MathModule = {}));

Módulo externo

Los módulos externos en TypeScript existen para especificar y cargar dependencias entre múltiples archivos js externos Si solo se usa un archivo js , 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 archivos js dependientes desde un solo 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. Esta será otra biblioteca js. 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 asincrónico). 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
Cuando se define un módulo externo en TypeScript destinado 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 la marca 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 usa la palabra clave exportimport.

Sintaxis

1
2
3
4
//FileName : SomeModule.ts
export interface SomeInterface {
   //interface body
}

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.

1
import SomeModule = require("./SomeModule")

o

1
import {SomeInterface} = require("./SomeModule")

Ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
// IShape.ts
export interface IShape {
   draw:()=>void
}
  
// Rectangle.ts
import shape = require("./IShape");
export class Rectangle implements shape.IShape {
   public draw() {
      console.log("Rectangle is drawn");
   }
}
    
// Test.ts
import shape = require("./IShape");
import rectangle = require("./Rectangle"); 
 
function drawAShape(s: shape.IShape) {
   s.draw();
}
 
drawAShape(new rectangle.Rectangle());

El comando para compilar el archivo TypeScript principal para sistemas AMD es:tsc --module amd Test.ts

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

Archivo: IShape.js

1
2
3
4
define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
});

Archivo Rectangle.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports.Rectangle = void 0;
    var Rectangle = /** @class */ (function () {
        function Rectangle() {
        }
        Rectangle.prototype.draw = function () {
            console.log("Rectangle is drawn");
        };
        return Rectangle;
    }());
    exports.Rectangle = Rectangle;
});

Archivo Test.js

1
2
3
4
5
6
7
8
define(["require", "exports", "./Rectangle"], function (require, exports, rectangle) {
    "use strict";
    exports.__esModule = true;
    function drawAShape(s) {
        s.draw();
    }
    drawAShape(new rectangle.Rectangle());
});

El comando para compilar el archivo TypeScript principal para sistemas Commonjs es:tsc --module commonjs Test.ts

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

Archivo: IShape.js

1
2
"use strict";
exports.__esModule = true;

Archivo Rectangle.js

1
2
3
4
5
6
7
8
9
10
11
12
"use strict";
exports.__esModule = true;
exports.Rectangle = void 0;
var Rectangle = /** @class */ (function () {
    function Rectangle() {
    }
    Rectangle.prototype.draw = function () {
        console.log("Rectangle is drawn");
    };
    return Rectangle;
}());
exports.Rectangle = Rectangle;

Archivo Test.js

1
2
3
4
5
6
7
"use strict";
exports.__esModule = true;
var rectangle = require("./Rectangle");
function drawAShape(s) {
    s.draw();
}
drawAShape(new rectangle.Rectangle());

Resultado:

1
2
D:\TypeScript\Module>node Test.js
Rectangle is drawn

Publicar un comentario

0 Comentarios