TypeScript / Modulos

Bienvenidos sean a este post, hoy veremos como son los modulos para javascript.

Una practica muy habitual que se utiliza en los lenguajes de programacion es la modularizacion. Esto es basicamente hacer que nuestro programa cargue la mayor parte de nuestro codigo desde distintas librerias o modulos. Esta tecnica en general es aplicada en las clases de un codigo donde cada uno de ellos tendran su propio archivo. Para poder referenciar nuestras clases desde otros archivos es necesario tanto un mecanismo para compilar en typescript asi como tambien una rutina para javascript que nos permita ubicar dichos archivos o modulos.

Typescript adopto la sintaxis de modulos que es parte de ES2015. El lenguaje utilizara esta sintaxis cuando este trabajando con modulos, haciendo que el compilador se encargue de generar el soporte correcto de modulos para la version de javascript que hayamos seleccionado, lo cual nos permitira dar soporte a versiones anteriores de javascript.

Para comenzar con los modulos necesitamos saber dos cosas para poder escribir y usar los modulos. El primero es que necesitamos exponer algo para el mundo exterior para que pueda ser utilizado. A esto se lo denominca como «exportando un simbolo desde el modulo» y para ello usamos a la palabra export, la cual utilizamos cuando hablamos de namespace en este post, basta de chacharas y comencemos con lo interesante.

Para ello deben crear un directorio con nombre cualquiera, por ejemplo ts, y en este lo primero que ejecutaremos sera el siguiente comando:

$ tsc --init

Este generara a tsconfig.json, el cual contendra la base de nuestro proyecto de typescript, de lo cual hablamos en este post, nuestro siguiente paso sera crear un directorio con el nombre de modulos y en este directorio crearemos un archivo con el nombre de modulo1.ts y le agregaremos este codigo:

modulos/modulo1.ts

export class modulo1 {
        mostrar(): void {
                elPrint("modulo1.mostrar() llamado");
        }
}
function elPrint(t: string) {
        console.log("elPrint: " +  t);
}

La clase la podremos exportar gracias a la palabra export, como hicimos con namespace, este se llama igual que el archivo pero no es obligatorio, aqui tendremos un solo metodo donde llamara a la funcion elPrint para mostrar ese mensaje. Por fuera tenemos la definicion de la funcion en el metodo del modulo, este recibe un valor y lo muestra en la consola.

Ya tenemos nuestro modulo para trabajar pero nos falta la otra parte, la encargada de la importacion. Para ello debemos crear un archivo fuera del directorio anterior con el nombre de modulos.ts y le agregaremos el siguiente codigo:

modulos.ts

import { modulo1 } from './modulos/modulo1';
let mod = new modulo1();
mod.mostrar();

Para poder importar un modulo se utiliza a import y entre las llaves pasaremos la clase que deseamos cargar/importar y el from se encarga de indicar desde donde debemos cargarlo. En el caso de la libreria no es necesario pasar la extension. Luego simplemente creamos el objeto de esta clase importada y llamaremos al metodo mostrar. Compilemos y veamos la salida:

$ node modulos.js
elPrint: modulo1.mostrar() llamado
$

En este caso nos mostro el mensaje que establecimos en la funcion. Otra opcion interesante que poseemos es la capacidad de renombrar los modulos importados, tomemos el codigo anterior y realicemos esta modificacion:

import { modulo1 as MiModulo } from './modulos/modulo1';
let mod = new MiModulo();
mod.mostrar();

En este caso mantenemos el codigo anterior pero cuando importamos al modulo en lugar de usar el nombre mediante la palabra as le pasamos el nuevo nombre identificador. A partir de ahora podemos usar este nombre como se ve al momento de crear nuestro objeto a lo largo de nuestro codigo.

Ya vimos como exportar, importar y renombrar modulos. Ahora veremos otra opcion que tenemos disponible como es la posibilidad de exportaciones multiples. Para ello debemos crear un archivo en el directorio modulos con el nombre de multiple.ts y le agregaremos el siguiente codigo:

modulos/multiple.ts

export class clase_mod_01 {
        mostrar(): void {
                console.log("Llamado desde clase_mod_01");
        }
}
export class clase_mod_02 {
        mostrar(): void {
                console.log("Llamado desde clase_mod_02");
        }
}

Aqui establecemos dos clases que contendran un metodo cada una, ambas tendran la opcion de exportarse y el metodo es simplemente un mensaje identificando desde donde se llamaron. Ahora volvamos a nuestro archivo modulos.ts del directorio anterior y modifiquemos el codigo de la siguiente manera:

import { clase_mod_01, clase_mod_02 } from './modulos/multiple';
let mod1 = new clase_mod_01();
let mod2 = new clase_mod_02();
mod1.mostrar();
mod2.mostrar();

Modificamos el arcihvo del cual importaremos y ademas le decimos las clases que debe importar. Despues crearemos un objeto de cada clase y llamaremos a los metodos mostrar de cada uno. Compilemos y veamos la salida:

$ node modulos.js
Llamado desde clase_mod_01
Llamado desde clase_mod_02
$

Ok, ya tenemos un codigo que exporta mas de una clase desde un modulo. Nuestro siguiente sera como aplicar un namespace a todo esto. Para ello volveremos al archivo modulos.ts y lo modificaremos de la siguiente manera:

import * as modulos_multiples from './modulos/multiple';
import { modulo1 } from './modulos/modulo1';
let mod = new modulo1;
let mod1 = new modulos_multiples.clase_mod_01();
let mod2 = new modulos_multiples.clase_mod_02();
mod.mostrar();
mod1.mostrar();
mod2.mostrar();

La primera linea importara los modulos que vimos en el ejemplo anterior pero mediante la palabra as nos permite asignarlos como un namespace. Esto es asi porque reemplazara esta importacion con ese nombre. La siguiente linea nos importa el modulo del primer ejemplo. Luego crearemos tres objetos donde el primero sera del modulo1 de la segunda importacion, el siguiente objeto sera una de las clases del modulo multiple pero ahora debemos pasar primero el namespace que le asignamos seguido del nombre de la clase, para el tercer objeto volvemos a hacer lo mismo pero para la otra clase. Tal como vimos al momento de hablar de namespace en este post, estos nos pueden ser utiles para cuando debamos diferenciarlos con otros secciones de nuestro codigo. Por utimo llamaremos al metodo mostrar de cada uno de los objetos, con esto comentado compilemos el codigo y veamos la salida:

$ node modulos.js
elPrint: modulo1.mostrar() llamado
Llamado desde clase_mod_01
Llamado desde clase_mod_02
$

Nuevamente volvio a funcionar perfectamente, con este ejemplo no solo vimos como habilitar un namespace sino que tambien podemos importar todos los modulos que sean necesarios para nuestro codigo. Ya hemos cubierto bastante pero nos queda un tema mas y para ello debemos tomar el archivo multiple.ts en el directorio modulos y debemos hacer la siguiente modificacion:

export default class clase_mod_01 {
        mostrar(): void {
                console.log("Llamado desde clase_mod_01");
        }
}
export class clase_mod_02 {
        mostrar(): void {
                console.log("Llamado desde clase_mod_02");
        }
}

En este caso no modificamos mucho solamente agregamos la palabra default a la primera clase sin modificar nada el resto. Pasemos a la siguiente modificacion y para ello debemos ir al archivo modulos.ts y modificaremos el codigo de la siguiente manera:

import clase_mod_01 from './modulos/multiple';
let mod = new clase_mod_01();
mod.mostrar();

Al considerarlo default no es necesario al momento de importarlo establecerlo entre llaves. Esa es la diferencia mas importante despues sigue siendo de la misma manera. Por esta razon no se utiliza mucho con las clases sino es mas frecuente hacerlo en las funciones, para entenderlo vamos a modificar el archivo modulo1.ts en el directorio modulos de la siguiente manera:

export class modulo1 {
        mostrar(): void {
                elPrint("modulo1.mostrar() llamado");
        }
}
export default function elPrint(t: string) {
        console.log("elPrint: " +  t);
}

En este caso no solo permitimos la exportacion de la funcion sino que la pasamos como default. Nuestro siguiente paso sera modificar a modulos.ts de la siguiente manera:

import elPrint from './modulos/modulo1';
let mod = elPrint("Hola, Mundo");

Observen que lo importamos como anteriormente y lo aplicamos directamente a una variable, si lo compilan y ejecutan obtendran la siguiente salida:

$ node modulos.js
elPrint: Hola, Mundo
$

Con esto cubrimos lo mas importante con el tema de modulos en typescript pero antes de terminar vamos a ver un par de cositas mas. La prrimera va a ser todos los archivos que se generaron y la estructura de nuestro «proyecto», comencemos con la estructura:

$ tree .
.
├── modulos
│   ├── modulo1.js
│   ├── modulo1.ts
│   ├── multiple.js
│   └── multiple.ts
├── modulos.js
├── modulos.ts
└── tsconfig.json

1 directory, 7 files
$

Observen que cada uno de nuestros archivos .ts tendra su respectiva conversion a .js. Yo trabaje con lo mas basico como es commonjs, es el javascript mas basico, y para que pueda trabajar con todo lo creado aqui al momento de convertirlo realizo estas modificaciones. Tomemos el primer caso que sera el archivo modulos.js:

modulos.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const modulo1_1 = __importDefault(require("./modulos/modulo1"));
let mod = (0, modulo1_1.default)("Hola, Mundo");

Este codigo le permite al javascript entender todo lo que debe hacer, ahora veamos el archivo modulo1.js del directorio modulos:

modulos/modulo.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.modulo1 = void 0;
class modulo1 {
    mostrar() {
        elPrint("modulo1.mostrar() llamado");
    }
}
exports.modulo1 = modulo1;
function elPrint(t) {
    console.log("elPrint: " + t);
}
exports.default = elPrint;

Aca es lo mismo, lo convirtio para que pueda ser interpretado por javascript. Recuerden que esto lo hice para commonjs, haciendo una pequeña modificacion en el archivo tsconfig.json puedan cambiar el javascript que usaran y estos archivos sufriran las modificaciones correspondientes. Para mas informacion sobre este archivo les dejo el siguiente post:

[post de proyecto de typescript]

En resumen, hoy hemos visto modulos, que son, para que sirve, como crearlos, como permitir exportarlos, como importarlos, como renombrarlos, aplicar un namespace, crear un default y por ultimo como es que lo convierte para que sea compatible con versiones estandar de javascript, espero les haya resultado util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.