Un recorrido por TypeScript

viernes, 19 de febrero de 2016


TypeScript representa la visión de Microsoft sobre JavaScript: un superset open source de uno de los lenguajes de programación más utilizados actualmente, al que le añade características que lo hacen aún más jugoso, como tipado estático, objetos basados en clases y capacidades de compilación y depuración en Visual Studio. Lo suficiente como para que ocupemos esta entrada hablando de él.

Con más de tres años en el mercado, TypeScript ha sabido ganarse un lugar en la comunidad de desarrolladores, especialmente en aquellos con largo recorrido dentro del ecosistema .NET. Incluso, causó cierto revuelo cuando, hace ya un año, se anunció que sería adoptado por AngularJS 2, la nueva versión del conocido framework.

En nuestro caso, llevamos un tiempo interactuando con TypeScript, en parte como consecuencia de un viaje aún más grande que decidimos emprender hacia tierras de Node.jsECMAScript 6. Nuestras impresiones fueron positivas, a punto tal que, en algunos de nuestros proyectos, hemos procedido a su implementación.

Todo suena muy bien, pero, ¿cómo funciona TypeScript? Echemos un vistazo a continuación.

Conceptos generales

El primer punto a destacar es que, cuando trabajamos con TypeScript, lo hacemos sobre un archivo con extensión .ts. Éste, luego de la compilación, se transforma en un .js, que será lo que finalmente terminaremos cargando en nuestra página.

El proceso de compilación se realiza directamente desde Visual Studio (siempre y cuando contemos con la versión 2013 Update 2 o superior), o bien de forma manual, a través del comando:
    tsc script.ts
Resulta interesante apreciar cómo el código generado es fácilmente legible. Además, la compilación nos genera source maps, algo que, sin dudas, supone un valor agregado importante al momento de hacer debugging.

Lo segundo por mencionar, es que al tratarse de un lenguaje tipado, nos permite definir clases, interfaces, y añadir información de tipos a los métodos. Esto es algo que podemos observar en la imagen que nos acompaña a la izquierda, donde se especifica que message debe ser del tipo string. Esto es algo sumamente interesante, ya que nos permite efectuar validaciones y detectar errores de manera inmediata, sin tener que pasar por la ejecución.



Así mismo, esto nos lleva a otro aspecto positivo, que es la posibilidad de tener toda esta información al alcance de la vista, a través de la ayuda que nos proporciona Intellisense.


El tercer punto importante, es que TypeScript es una extensión de JavaScript; esto significa, por un lado, que bajo ningún concepto estamos obligados a utilizar su sintaxis, pero, también, nos garantiza la total compatibilidad para con cualquier código ya existente escrito en JS.

Modularizando

TypeScript nos permite organizar nuestro código de dos maneras: utilizando el estándar CommonJS, o bien AMD (Asynchronous Module Definition).

Como en Node, en TypeScript tenemos las palabras reservadas export e import para exponer y acceder a los elementos de un determinado componente de nuestra aplicación.


Del mismo modo, también podemos importar librerías externas como jQuery, haciendo uso de lo que se conocen como typings. Siendo reconocibles por su extensión d.ts, estos ficheros de definición se utilizan para poder hacer referencia a dichos paquetes.

Aquí es importante hacer un paréntesis para mencionar Typings, un manager que nos simplifica enormemente el manejo de estas definiciones. Su instalación se realiza desde npm, y para más información sobre su uso, les encomendamos pegarle un vistazo al poderoso readme de su repositorio.

¿Cómo seguir?

Habiéndonos propuesto poder dar una respuesta a las preguntas fundamentales, como qué es TypeScript y cuáles son sus características principales, el primer paso ya está dado. Ahora, ya teniendo una idea más formada de lo que se esconde detrás de su nombre, el paso siguiente, y casi inevitable, es acudir a las fuentes: su vasta documentación. Una lectura ciertamente interesante, que nos permitirá aprender y comprenderlo en profundidad.
Leer más...