¿Cual es la diferencia entre los módulos TypeScript y los módulos Angular? - El Mundo de Angular

¿Cual es la diferencia entre los módulos TypeScript y los módulos Angular?

Si en algún momento de tu vida te preguntaste por qué Angular maneja sus módulos en una forma y Typescript de otra (o si no te lo preguntaste pero ahora te agarró curiosidad ;)… Seguí leyendo!

Si alguna vez tuviste enfrente un módulo de Angular, seguramente habrás visto algo más o menos así

Y te preguntarás por qué aparece la palabra import en las líneas 1 y 2… y por qué aparece la palabra imports en la linea 6… Además, ¿qué significa ese export en la linea 10?.

Antes que nada, cabe aclarar que las aplicaciones de Angular se codifican en el lenguaje TypeScript. Es decir, hay que seguir las «reglas» del lenguaje TypeScript y luego las «reglas» de Angular, para construir nuestras aplicaciones Angular.

Es por eso que en el mismo archivo hay tantas palabras parecidas, como import, imports y export. Estas palabras claves se usan para manejar módulos, tanto en TypeScript como en Angular. Pasemos a explicar cuales son cada una de esas reglas

El mundo de los módulos en TypeScript

El primero que pone sus «reglas» es TypeScript, así que hay que respetar su forma de crear módulos, importarlos y exportarlos.

La forma de crear una clase en TypeScript es usando la palabra reservada «class«. Una clase es un conjunto de datos y de acciones empaquetados a los que se les da un nombre (en el ejemplo, la clase se llama CocinaModule, pero podría tener cualquier otro nombre).

Pero esta clase no es visible al resto del mundo, fuera del archivo donde se la crea; o sea, si en alguna otra parte de nuestra aplicación se quisiera usar esa clase, el código nos arrojaría un error. Es por eso que se le agrega la palabra «export» delante de «class«, como se ve en la linea 10. De esta forma, la clase se hace «pública» en todo nuestra aplicación

Bien, nuestra clase es publica para ser usada en cualquier parte, peeero… si algún otro módulo quiere usarla, ¿cómo hace? ¿Se usa para eso la palabra reservada «import«?

Efectivamente, si otro archivo quisiera acceder a la clase CocinaModule tendría que hacer algo así:

Y ahora los módulos en el mundo Angular

Ahora que sabemos cómo funcionan los módulos en TypeScript, vamos a ver cómo funcionan en Angular.

Como regla, todos los módulos Angular son clases, así que hay que crear una clase y exportarla para que sea visible por el resto de los módulos (eso lo hacemos, como lo explicamos antes, usando TypeScript). Luego hay que «decorarla» con la palabra NgModule, o sea agregar «@» seguido por NgModule, para indicar que es un módulo de Angular.

En este ejemplo se ve que este módulo Angular «CocinaModule» está usando el módulo Angular «CommonModule» en la línea 6.

También se ve que la forma de traerse esos módulos es usando la «forma» TypeScript (o sea  import NOMBRE_MODULO from UBICACION_ARCHIVO_DONDE_ESTA_EL_MODULO)

Para aclarar un poco más la idea, veamos cómo se relacionan los módulos Angular en el ejemplo. El módulo Angular llamado «Cocina» usa el módulo Angular «Common»

Y así se relacionan los módulos TypeScript. El módulo «CocinaModule» se importa (y usa) los módulos «CommonModule» y «NgModule» (aunque sea un «decorador», para TypeScript es un módulo y lo trata como tal, importándolo)

Conclusión

Como vieron, hay dos mundos (Angular y TypeScript), cada uno con sus reglas. Y aunque en este caso hagan cosas similares (manejar módulos) la forma de hacerlo es diferente. Mientras tengamos en claro cómo manejar los módulos en los diferentes «mundos» nos ahorraremos dolores de cabeza en el futuro.

Nos vemos en el próximo post!

 

 

About the Author

Mi nombre es Gustavo Hernán Dohara, soy Ingeniero en Sistemas y, sobre todas las cosas, soy un apasionado por la tecnología; tengo más de 10 años de experiencia en diferentes tecnologías y he decidido compartir mis conocimientos y experiencias con cualquiera que desee aprender: alumnos, empleados, freelancers y vos. Al ritmo que cada uno pueda, en el horario en que cada uno pueda y en el lugar que cada uno elija.