TypeScript: Creando un controlador para AngularJS

Como decíamos en esta entrada del blog, TypeScript puede suponer una buena ayuda para ‘tipar’ nuestro JavaScript y la mejor forma para crear código más mantenible a largo plazo.

Como también os dije, el equipo de AngularJS ha decidido desarrollar su nueva versión del framework con la ayuda de TypeScript. Esta unión no supone en si ninguna mejora ni una obligación para desarrollar software de una forma determinada. Si lo pensamos fríamente, ahora mismo ya podemos unir TS y AngularJS o no y en el futuro podremos unirlos o no sin ningún tipo de dependencia entre ambos o de un handicap por no usarlos combinados. Por tanto, la decisión que los usemos juntos, solo dependerá de nuestro criterio, las necesidades y el contexto en el que nos encontremos.

Es cierto que la cooperación entre ambos equipos va a suponer, a priori, mejoras para sendas tecnologías y que será una alternativa, que en el futuro más próximo, tendremos que tenerla en cuenta si encaramos desarrollos web con AngularJS. Es por eso que hoy me gustaría poner un poco TypeScript en práctica y mostrar como se fusionaría con el framework de Google.

A continuación os muestro un controlador de AngularJS creado con TypeScript. Este controlador lo único que hace es añadir una serie de superhéroes de Marvel Studios a un listado y permite añadir nuevos. Si el superheroe que se indica de nuevo es Spiderman se permite mostrar una imagen. El código es el siguiente:

Expliquemos un poco lo que hacemos en este controlador y las diferencias que podemos ver con lo que estamos acostumbrados a realizar.

Referenciando librerias tipadas

Lo primero que vemos al empezar el script, es un comentario de referencia a una ruta. Estos ficheros son conocidos en TypeScript como typings. Los typings son ficheros que nos indican los elementos tipados de librerías externas como puedan ser jquery o angular. Estos ficheros con extensión ‘d.ts‘ nos permitirán tener intelisense de las librerias y coregir errores en tiempo de compilación.

Para instalar typings en nuestra aplicación, contamos con una herramienta de nodeJS llamada tds que podemos descargar desde npm. Para saber más sobre typings no dudes en visitar este enlace.

En nuestro controlador, como es de suponer, contamos con la referencia al fichero de tipos de angular. Gracias a esto los editores de código, nos muestran todos os tipos con los que cuenta la librería y nos permite compilar y tipar variables sin errores.

Modularizando

Lo siguiente que encontramos es la forma de modular de TypeScript. Indicamos con la palabra reservada ‘module‘ el componente TS de nuestra aplicación y por medio de la palabra reservada ‘export‘, exponemos todos los elementos que puedan ser accedidos desde fuera del modulo. En nuestro caso, hemos puesto accesible la clase del controlador y una interfaz que explicaremos a continuación.

Creando nuestra clase controlador

Los que venimos de MVC.NET esta forma de declarar una clase para crear un controlador nos es conocida. Por medio de la palabra reservada ‘class‘, definimos la clase. Dentro de ella, contamos con un atributo de acceso privado llamado _heroes definido como un array de strings. El atributo static lo dejaremos para más adelante.

Nuestra clase cuenta con un constructor que es el corazón de nuestro controlador. Como vemos, se le pasa un parámetro llamado $scope. Este será el $scope que usará AngularJS para comunicarse con la interfaz. Esto es una peculiaridad de TypeScript, pues se pueden definir atributos en la misma firma del constructor sin tener que definirlos previamente, ni tener que asignárselos posteriormente. Dentro del constructor nos encontramos las típicas asignaciones que hacemos en AngularJS al $scope.

Por último, dentro de la clase, encontramos un método privado. Lo bueno de que estructuremos nuestros controladores con clases, es que ahora no hace falta que tengamos nuestro código revuelto y unido dentro de una función. Si nuestro $scope necesita realizar acciones, estas acciones se pueden delegar a métodos privados de nuestra clase.

Tipando el $scope

Os habréis dado cuenta que hemos tipado el $scope para cerciorarnos con qué elementos va a poder contar la vista. Este tipado se registra por medio de la interfaz que declarada superiormente y que es está extendida del tipo declarado en el typing de AngularJS IScope. De esta forma extendemos el tipo por defecto de Angular y podemos agregar nuestros elementos.

Este código nos da información de lo que esperamos de ese $scope en particular. Si otros desarrolladores tuviesen que mantener esta clases, sabrán las restricciones con las que cuentan. Perdemos la flexibilidad de JavaScript, pero ganamos en legibilidad dentro del código. Como en todo, este es el debate que tendrá que hacerse todo desarrollador. La elección no es buena ni mala, dependerá del desarrollador.

Inyectando las dependencias

Como sabemos, AngularJS cuenta con un inyector de dependencias. Nosotros no tendremos que preocuparnos de las dependencias de nuestro código ya que AngularJS lo hará por nosotros. Si nos damos cuenta, nuestro servicio $scope, que pasamos por parámetro al constructor, es una inyección que hará posteriormente el framework. Esto está genial hasta que trabajamos con minificadores de código.

Los minificadores de código, por optimizar los ficheros en cuanto a tamaño, renombran las variables y firmas de nuestro código. Esto que puede resultar trivial, supone la ruptura del inyector de dependencias de AngularJS, ya que si, cambiamos estos nombres, el inyector no consigue saber que modulo, servicio o factoría incluir cómo dependencia.

Para solucionarlo, le indicamos al framework las dependencias con $inject los elementos a inyectar por medio de un array de dependencias. En nuestro caso, el controlador solo depende del servicio $scope.

Existen otras formas de indicar las dependencias al controlador, pero esta es sin duda la más desacoplada. Os dejo un enlace aquí.

Registrando el controlador en AngularJS

Una vez que hemos implementado nuestra clase, se la registraremos a AngularJS con el método ‘controller‘. Al método le pasamos un nombre descriptivo y la clase desarrollada MarvelController. Tenemos que tener en cuenta que, de la instancia de la clase, ya se encarga el propio framework, por lo que con pasársela por parámetros, no tendremos que hacer mucho más.

Conclusiones

Si ejecutamos este código con una interfaz, comprbaremos que funciona. Como podemos ver, el código generado, contiene más lineas de las que un controlador tipo suele contener. El debate estará servido siempre entre los Ninja JavaScripter y los desarrolladores puros POO. Tendremos que elegir entre la flexibilidad y algo menos de legibilidad o la restricción y el alto grado de legibilidad. Yo creo que el número de lineas que se implementan con TypeScript, merecen la pena para la de problemas que puede evitarnos en un futuro mantener este código.

Como ya dije, TypeScript no ha inventado nada y el código que generará, podremos implementarlo nosotros sin ningún tipo de dudas, por lo que, quizá lo que tengamos que hacer es aprender a ser rigurosos con JavaScript. Si nos lo proponemos, se puede ;).

Nos leemos 🙂

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s