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
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
Compilamos y ejecutamos:
Module app
Si no hubieramos seleccionado la salida en un único fichero, nos daria 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
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!