TypeScript (IV): Utilización de librerías de terceros

En estos artículos previos, hemos visto como empezar a construir aplicaciones usando TypeScript, cuales son algunos de sus puntos fuertes, caracteristicas y como empezar a utilizarlo en nuestros desarrollos. En este artículo vamos a ver como podemos utilizar librerías de terceros en nuestros desarrollos. Cuando desarrollamos en JavaScript al final y al cabo es rara la ocasión en que no utilizamos ninguna librería bien  que nos ayude en algún aspecto como puedan ser JQuery, Knockout o Mustache o bien un FrameWork JavaScript que tenga algo más que una utilidad como pueda ser AngularJS.

Para poder utilizar cualquier desarrollo realizado en JavaScript hace falta  una definición previa de estas funciones, para ello hay una potente comunidad “Open Source” donde están los tipos de dichas librerías. Este proyecto esta en el siguiente enlace http://definitelytyped.org/ 

Ahora vamos a ver como podemos utilizar JQuery y Mustache dentro de nuestros. Partimos del ejemplo del anterior post donde teníamos una clase Persona, ahora lo que vamos a realizar es consulta a un método nos devuelve todas las personas, las cuales las visualizaremos por pantalla. Para el renderizado utilizaremos una plantilla Mustache con el diseño para que se muestren las personas y utilizaremos Jquery para agregar esta plantilla dentro del DOM (aunque para este supuesto no seria necesario utilizar JQuery ya que se puede hacer de forma nativa. 

Manos a la obra

En primer lugar, nos descargaremos los tipos y las librerías tanto de Jquery como de Mustache a través de Nuget,

A continuación en la clase Person.ts vamos a añadir una nueva clase donde vamos Universidad donde vamos a devolver los alumnos que hay en la Universidad. El código es el siguiente:

Ahora dentro de nuestro index.html añadiremos las referencias tanto a la libreria Jquery como Mustache que nos hemos descargado previamente (más adelante veremos como incluirla dentro de nuestro proceso de descarga asíncrona AMD). El siguiente paso es dentro de nuestra modulo app.ts agregarle la referencia a los tipos de Jquery y de Mustache. Se puede hacer bien arrastrando el fichero a nuestro código o bien añadiendo las siguientes referencias:

Una vez añadidos los tipos si dentro de nuestro entorno de desarrollo escribimos $, JQuery o Mustache tenemos “intelisense” y se puede visualizar todos los métodos que hay disponibles para estas librerías. En nuestro caso nos basta con agregar estas lineas de código:

Dentro del template person.html el contenido es un simple html que tiene este contenido:

Si ejecutamos el código se muestra la siguiente pantalla:

Agregando AMD a este desarrollo:

Al igual que nuestros desarrollos es conveniente que dentro de nuestros desarollos sepamos de que librerías dependen tanto internas como externas, para eso en primer lugar vamos a dirigirnos a nuestro punto de arranque el modulo bootstraper.ts y agregarmos la configuración donde vamos a indicar las librerias que vamos a utilizar y su ubicación dentro de nuestro proyecto en nuestro caso quedaría de la siguiente manera:

Ahora dentro de nuestro desarrollo en lugar de utilizar los valores por defecto tenemos que cargar el modulo de la misma forma que un modulo simple es decir así:

Esto como se queda reflejado en el JS pues en la cabecera agregar la referencia y Requiere se encarga de la carga de estas librerias:

Y ahora en lugar en nuestro código en lugar de llamar directamente a Mustache, JQuery o $ llamamos a nuestra variable con lo que el código quedaría de la siguiente manera:

Si ahora ejecutamos nuestra aplicación y analizamos la carga de los ficheros JavaScript comprobaremos que todo ha ido correctamente:

 

Conclusión

Con TypeScript no hace falta que se vuelva a reinventar miles de frameworks JavaScript que ya existen sino que se pueden utilizar dentro del mismo y además con ventajas como el Intellisense y el tenerlo de una forma más organizada. Al fin y al cabo TypeScript no es más que un super conjunto de JavaScript por lo que todo lo que hacemos con JS lo podemos hacer/utilizar dentro de TypeScript pero con la ventaja de los tipos y la compilación

 

Este ejemplo lo podeís descargar desde mi GitHub

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *