Primeras impresiones con TypeScript

Posted by in HTML5

TypeScript

TypeScript

Después de varios días aprendiendo TypeScript, debo admitir que este lenguaje me gusta! Aun siendo de Microsoft!! Si tienes algo de tiempo, aquí tienes un artículo para leer sobre porqué TypeScript esta cogiendo popularidad para desarrollar Javascript.

Eso sí, empezar no ha sido fácil. Hay que aprender nueva sintaxis, preparar un entorno de desarrollo (para grandes aplicaciones, mejor tener un buen entorno que hacerlo desde un editor de texto a secas).

Recursos

Lo primero es poner una serie de recursos para iniciarse (todos estan en inglés). El primero, el HandBook oficial de TypeScript: http://www.typescriptlang.org/Handbook. , cuyo enlace es muy recomendable tener disponible.

Material relativo a TypeScript en español hay poco, pero sí quiero destacar YoTypeScript, una web donde tienes un libro exclusivo de 150 páginas sobre TypeScript. Yo me lo he descargado, y comienza por desgranar la historia de Javascript, cómo se inicia uno con TypeScript, cómo disponer de un IDE, cómo son las variables, …. y así va avanzando en dificultad. Aún no lo he terminado, pero su lectura me ha aportado mucho para aprender TypeScript y mejorar. De ahí, mi recomendación.

Entorno de trabajo

Los entornos de trabajo naturales para trabajar con TypeScript son Visual Studio y WebStorm (de pago). Yo estoy utilizando CATS, y que ya te enseñé cómo tenerlo instalado y portable .

Si uno quiere utilizar Sublime Text, Brackets, Atom, … no queda más remedio que armarse de un poco de paciencia, pues para compilar es necesario disponer de Node.JS y unas cuantas herramientas más antes de tener el compilador listo. Cómo no trabajo con Node.js, no me he complicado la vida, pero si quieres probar un camino más complicado, aquí tienes cómo preparar el entorno TypeScript con Gulp.

Volviendo a CATS, aunque no es un editor perfecto, sí que cumple perfectamente su cometido casi sin instalar nada (sólo descargando dos programas, que ademas funcionan sin necesidad de instalar absolutamente nada). Ya he puesto en el foro algunas mejoras que se podrían añadir, y cómo está en pleno desarrollo, esperamos que estén disponibles pronto. Además, actualizar es simplemte volver a descargar los archivos y descomprimir!!

Si no quieres instalar nada y probar un WebIDE online, lo mejor es que pases por TypeScript Playground, donde en la zona de la izquierda puedes escribir código en TypeScript, y a la derecha se va escribiendo el mismo código en Javascript. Para pequeñas pruebas o para iniciarse es una buena alternativa, pero tiene el gran inconveniente de que no permite trabajar con varios archivos, ni organizarse en proyectos, ni nada de nada.

En cuanto a Visual Studio, para tener TypeScript hay que instalar un plugin de TypeScript para tener disponible este lenguaje.

Si eres más de Eclipse, la mejor alternativa es instalar este plugin .

Desde luego, al ser Microsoft la creadora de dicho lenguaje, la mejor alternativa como entorno de trabajo es Visual Studio, que además es la que más preparada está para el tema de depuración, un aspecto fundamental en grandes aplicaciones, y que hay que conocer.

Empezando con el lenguaje

Creo que la primera lección de TypeScript es conocer los tipos de datos admitidos, que son: boolean, number, string, array, enum, any, y void. Me gusta la simplificación de tipos básicos, junto con las matrices (array) y los enumeradores (enum), un tipo que puede ser cualquier cosa (any), y otro que no devuelve nada (void). Más que suficiente.

La segunda lección es saber que en TypeScript, los nombres de las variables son sensibles a mayúsculas y minúsculas del mismo modo que lo es Javascript (no olvidar que TypeScript es un superclass de Javascript). Además, es obligatorio es la declaración de variables mediante var, al igual que se recomienda con Javascript.

La asignación de tipos a las variables se hace por anotación (especificando concretamente), o bien por inferencia, mediante la asignación de un valor:


var foo: string = "TyppeScript"; // Por anotación

var bar = 10.2; // Por inferencia

Respecto a los tipos, una de las cosas que más me ha gustado es la posibilidad de crear tu mismo tus propios tipos, así como usar todos los tipos que tiene definidos el propio lenguaje TypeScript, y que están definidos en el archivo lib.d.ts, donde encuentras los tipos básicos, además de otros como window, document, HTMLElement, HTMLInputElement, HTMLButtonElement, …. con lo que te será más fácil trabajar con grandes aplicaciones.


type StringArray: string[]; // Define Type

var foobar: StringArray = ['foo', 'bar']; 

La última lección de esta entrada es sobre la recomendación de usar ; como separador de sentencias al igual que Javascript, aunque no obligatorio. Respecto a los comentarios, son los mismos que en Javascript, con // y /* … */.

Seguimos avanzando.