TypeScript Dia 4 - Módulos y Namespaces

Vídeo Guía

Vídeo 2: Typescript Dia 2- Gramática y Sintaxis

Hola bienvenidos a el vídeo numero 4 de Typescript este es el ultimo vídeo sobre esta serie donde hablaremos sobre módulos y namespaces espero lo disfruten

Módulos

Hablemos sobe modulos…

Esta diapositiva digamos que era sobre TypeScript 1.3 pero a partir de TypeScript 1.6 ya no se utiliza la palabra module sino namespaces, igual compila y funciona correctamente pero digamos que la manera correcta es namespaces.
Entonces un modulo o namespaces es simplemente con la palabra clave namespaces luego el nombre.

alt text

Cuando utilizamos clases y no estan digamos que embebidas dentro de un namespaces esas clases lo que hacen es polucionar el global namespace es decir window. Si ustedes miran la consola de google Chrome o Firefox van a ver que hay muchas variables en lo que se llama el namespace global, todas esas vaiables pertenecen a window y la mejor practica para desarrollar con Typescript y con Javascript es no polucionar el global namespace es decir encapsular todas nuestras funcionalidades en el nampespaces con otros nombres, entonces aquí en esta clase debería estar dentro de namespace.

alt text

¿Para qué nos sirven los módulos?

Primero Para separar, para que no nos quede todo nuestro código en un solo archivo, digamoslo así. Los namespaces pueden definirse a través de archivos diferentes entonces de esta manera digamos que codificamos muy parecido a como lo hacemos en C# por ejemplo donde cada clase tiene su propio archivo y obviamente esos archivos están dentro del namespaces. Las clases o los miembros de esos namespaces mas bien digamos que nos permiten definir o exportar características, entonces yo puedo exportar clases que existen dentro de un namespace como tal.

Continuando con namespaces como pueden ver en el ejemplo de la diapositiva tenemos un namespaces Shapes con una clase rectángulo y su interface, pero no lo podríamos utilizar fuera de este programa, para ese archivo por decirlo así es inaccesible porque nada fue exportado

alt text

Para hacerlo de manera correcta lo que hay que hacer es utilizar la palabra export, y eso lo que nos permite ya desde otro archivo o desde fuera de namespaces como tal, poder utilizar ese namespace y esa clase que fue exportada.

alt text

Extendiendo Módulos o Namespaces

A pesar de que yo creo en un archivo un namespace con una clase y lo exporto, estos namespace como en C# por ejemplo se pueden extender a través de múltiples archivos, es decir definir clases en múltiples archivos no necesariamente en el mismo entonces qui tengo en la parte inferior también el circulo como otra clase pero realmente esta en archivos diferentes

alt text

Que es un IFFY?

Inmmediately invoked function expression siemplemente es la forma como el transpilador de Typescript convierte esos namespaces a código Javascript de tal manera que no poluciona, no contamina el namespaces global es decir el window

alt text

Entonces aquí vemos un ejemplo donde vemos un namespace Shapes, con la clase rectángulo y luego en la parte inferior utilizamos, si vamos en la parte derecha, pueden ver que tenemos dos IFFE uno para definir la variable rectángulo que se ejecuta inmediatamente y luego en la parte inferior para la variable Shapes o namespaces shapes, y luego mucho mas abajo pueden ver como utilizar shapes.rectangulo de esa manera no estoy contaminando el namepaces window

alt text

¿Como se separan módulos internos?

Pues la idea es que sea a traves de multiples archivos, se deben cargan cuando estamos utilizando el HTML, se deben cargar en el orden adecuado y se pueden referenciar a traves de triple /// reference path y el nombre del archivo.

alt text