Modulos internos en #TypeScript

TypeScript

Aunque hablamos muy de pasada, los módulos es otro de los puntos fuertes de #TypeScript para mejorar la organización y la reutilización de código. En C# se conoce como NameSpace, y comparte también la característica de que puede estar distribuido en varios ficheros.

Los módulos en TypeScript

Los módulos permiten agrupar código con igual finalidad. Por ejemplo, si tienes un proyecto grande, no está mal que te crees varios módulos: uno para las interfaces, otro para las clases relacionadas con nuestra base de datos, y otro para el resto de clases (bueno, esta es mi propuesta, pero tú puedes elegir otra configuración).

Consiste en agrupar todo dentro de modulo NombreModulo { tus funciones y clases }. Para que las funciones y clases de los módulos puedan ser utilizadas desde fuera, deben de incluir la palabra export.

Vamos a crear un pequeño proyecto para comprender cómo funcionan los módulos en TypeScript. Creamos test.ts:

function test () { console.log('Test'); }

Creamos un segundo fichero test2.ts:

function test2 () { console.log('Test 2'); }

Y necesitamos un fichero de la aplicación app.ts:, donde hacemos referencia a los archivos que necesitamos test.ts y test2.ts:


/// <reference path="./test.ts" />
/// <reference path="./test2.ts"/>

test();
test2();

app.ts

app.ts

El código del HTML es de lo más simple, pues es un ejemplo:


<!DOCTYPE html>
<html lang="es">
<head>
<title>Manejando datos - TypeScript</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>

Cómo puedes ver, sólo necesitamos app.js, por lo que debemos configurar nuestro proyecto para que todo el código compilado se procese en un único fichero (si no se desea, sólo es cuestión de incluir las referencias script). Esto lo hacemos desde las propiedades del proyecto:

project settings CATS

project settings CATS

Compilamos y ejecutamos:

Module app

Module app

Si no hubieramos seleccionado la salida en un único fichero, nos daria error:

Module app error

Module app error

Modificación 1, creando módulos internos

Si queremos agrupar los dos archivos test1.ts y test2.ts en un mismo módulo, sólo tenemos que incluir la palabra clave module y exportar lo que necesitemos mediante export:

Así que toca modificar test.ts:


module App { export function test() { console.log('Test')  } }

Procedemos de igual forma con test2.ts:

</pre>
<pre>module App { export function test2() { console.log('Test 2') }}

Y también necesitamos modificar app.ts para que trabaje con el módulo App, a pesar de que seguimos con las referencias:


/// <reference path="./test.ts" />
/// <reference path="./test2.ts"/>

App.test();
App.test2();

Al igual que antes, compilamos en un único archivo. El resultado que obtenemos no cambia.

Module App

Module App

Un breve resumen de los módulos internos

Sin duda, conocer esta característica de TypeScript requiere un extra, con mucho valor añadido, y sobre todo, pensando en el futuro, en la reutilización de código. Este ejemplo es bastante significativo para conocer cúal es el funcionamiento básico, pero que se complica conforme ganamos en dificultad. Eso sí, con un poco de práctica, lo que parece tan complicado deja de serlo (y te lo digo por experiencia).

En TypeScript 1.5 se ha cambiado el nombre de módulos internos por NameSpaces, al igual que se denominan en C#. Puedes leer más sobre las características de TS 1.5 aquí.

Lo siguiente son los módulos externos, que suponen otro extra de dificultad añadida para iniciarse, pero con notables beneficios para el futuro!

Happy coding!