TypeScript

Mario González - Blog sobre desarrollo web

Por qué deberías empezar ya con TypeScript

| , ,

Con la irrupción de Angular en nuestras vidas, muchos de nosotros ya nos hemos habituado a usar este lenguaje de Microsoft. Pero la verdad es que su utilidad va mucho más allá de Angular, como vamos a intentar ver en este artículo. TypeScript convierte a JavaScript en un lenguaje más potente y te permite escribir código siguiendo los últimos estándares, aunque éstos no estén aún implementados en los navegadores.

Mejorando JS

Aunque JavaScript sea actualmente el lenguaje de programación más usado (o al menos eso dicen los últimos informes de GitHub y de StackOverflow), siempre ha sido considerado un lenguaje de juguete por los desarrolladores de otros lenguajes de verdad, como C# o Java.

JavaScript es un lenguaje de tipado débil, sin implementación de clases, y que históricamente te permitía hacer básicamente lo que te daba la gana con el código. Esa ausencia de restricciones, aunque contribuyó a su popularización, siempre hizo de JavaScript un lenguaje limitado, una tecnología con la que era difícil programar aplicaciones modulares y escalables. JavaScript te permitía crear una UI básica de una web, pero si querías programar una webapp, en algún momento ibas a tener la sensación que tu código estaba cogido con pinzas y que al mínimo cambio toda la aplicación se iba a desmoronar.

En verano de 2015 se dio un gran salto adelante con la publicación del estándar ECMAScript 6, que incluía grandes cambios y mejoras en la manera de programar con JavaScript. En esta nueva versión aparecieron restricciones -cosas como la imposibilidad de redeclarar una variable previamente declarada, por ejemplo-, sintaxis de clases y módulos.

Si bien aquella nueva versión del estándar trajo muchas ventajas, la realidad es que los navegadores han tardado mucho en implementar todas las características del ECMAScript 6. Así que, por mucho JavaScript moderno que supiéramos escribir, de nada nos servía si los navegadores no lo entendían.

Transpiladores

Afortunadamente, aparecieron algunas herramientas que solucionaron este problema: los transpiladores. Un transpilador es un tipo de compilador que, en vez de traducir de un lenguaje a otro, traduce de una versión de un lenguaje a otra versión del mismo lenguaje.

Los transpiladores son piezas fundamentales del desarrollo actual en JavaScript y su atractivo reside en que nos permiten escribir código moderno aunque los navegadores aún no lo entiendan. Los transpiladores como Babel o TypeScript cogen nuestro JavaScript escrito según los estándares modernos (ECMAScript 6, 7 u 8) y lo convierten en JavaScript antiguo, del que los navegadores saben interpretar.

¿Babel o TypeScript?

Si lo único que necesitas es poder escribir código conforme a los últimos estándares, quizás vayas servido con Babel, pues su función es simplemente ésa, traducir de JavaScript moderno a JavaScript compatible.

TypeScript es, además de un transpilador, un superconjunto de JavaScript. Es decir, te ofrece cosas que no tienes con puro JavaScript, y al final te deja un código compatible con los navegadores. Si quieres programar una aplicación robusta, mi consejo es que tires de TypeScript. En las próximas líneas vamos a desgranar qué nos ofrece este lenguaje.

Un lenguaje de tipado fuerte

Como decíamos antes, TypeScript es un superconjunto de JavaScript, coge este lenguaje y lo mejora con nuevas funcionalidades. Uno de los principales añadidos es que TS es de tipado fuerte. Esto supone un cambio importante en la manera de programar, puesto que con TypeScript puedes establecer explícitamente el tipo de cada variable o función:


// JavaScript
function sumar(a, b) { ... }

// TypeScript
function sumar(a: number, b: number): number { ... }

Esto nos ofrece la seguridad de que el código funciona tal y como nosotros queremos: una variable tipada como number nunca podrá almacenar, por ejemplo, una cadena. Con esto reducimos las probabilidades de errores difíciles de detectar.

Pero además de hacer nuestro código más seguro, nos facilita consumir funciones desarrolladas por terceros. Muchas veces necesitamos saber qué tipo de valores espera una función que no hemos escrito nosotros, y tenemos que irnos a leer la documentación o mirar su código para saberlo. Los editores que soportan TypeScript nos ayudarán en esta tarea, y cuando escribamos el nombre de la función, automáticamente nos mostrarán los tipos de los argumentos que espera recibir y también el del valor que devolverá.

Visual Studio Code chivándonos los tipos de valores que acepta y devuelve la función Math.pow()

Errores en tiempo de compilación

Si has programado anteriormente en JavaScript sabrás que los errores no se ven hasta que no ejecutas el código, es decir, hasta que no abres la web en el navegador. Eso si tienes la consola abierta, porque si no a lo mejor ni te enteras de que hay un error. Esto es porque los errores de JavaScript se dan en tiempo de ejecución.

TypeScript es un compilador (recordad que un transpilador es un tipo de compilador), por tanto, va a encargarse de repasar tu código y convertirlo a JavaScript compatible. Si en ese proceso se encuentra con algún error, te lo comunicará. Así te enterarás del error antes de ejecutar el código en el navegador.

De hecho, si usas un editor que integre TypeScript de forma nativa (te recomiendo Visual Studio Code: una maravilla para trabajar con este lenguaje) o mediante extensiones, el mismo programa te avisará de los errores mientras estás escribiendo código.

Visual Studio Code avisándonos de un error en nuestro código

Cambios en las funciones

JavaScript es flexible en cuanto al número de parámetros que puede recibir una función. Yo puedo crear una función que acepta dos parámetros, y en la llamada puedo pasarle dos, uno, seis o ninguno, y JavaScript no se quejará por ello. TypeScript te obliga a que el número de parámetros que le pases a una función coincida con el que la función espera. Esto, que en principio parece un engorro, ayuda a reducir los errores.


// JavaScript
function sumar(a, b) { ... }  // La función espera dos argumentos
sumar(10, 2, -6);             // La llamamos con tres, no hay ningún error

// TypeScript
function sumar(a, b) { ... }  // La función espera dos argumentos
sumar(10, 2, -6);             // La llamamos con tres, recibiremos un error
TypeScript nos avisa de que estamos pasando un argumento más del que la función espera

Por fin: ¡clases en JavaScript!

Una de las cosas que más se echaban de menos en JavaScript eran las clases. JS se basa en un sistema de prototipado que hacía un poco difícil escribir un código orientado a objetos, sobre todo si estabas acostumbrado a otros lenguajes. ECMAScript 6 nos trajo, por fin, las clases. Aunque era un cambio más superficial de lo que parecía, puesto que sólo nos ofrecía una sintaxis para escribir clases, pero por detrás seguía funcionando con prototipado, la verdad es que ayudó mucho a poder desarrollar siguiendo los patrones tradicionales de los lenguajes orientados a objetos.

La sintaxis de clases de JavaScript, no obstante, es un poco precaria. Por ejemplo, no puedes declarar propiedades de una clase fuera de su constructor, no hay manera de decir si un miembro es privado o público, y no puedes crear interfaces. TypeScript nos ofrece estas cosas que le faltan a JS: nos permite crear las propiedades de la clase fuera de cualquier método, establecer la visibilidad (public, private o protected) de los miembros, crear e implementar interfaces, y crear miembros estáticos y abstractos, entre otras cosas.


// JavaScript
class Factura {
	constructor() {
		this.iva = 21;
		this.irpf = 15;
	}
}

// TypeScript
class Factura {
	private iva: number = 21;
	private irpf: number = 15;
}

En próximos capítulos…

Aparte de todos los añadidos que hemos explicado, TypeScript nos ofrece cosas tan potentes como los genéricos o los decoradores (estos últimos se utilizan mucho en Angular). Si mezclas todos los añadidos con la integración de TypeScript en los editores, tendrás una experiencia de programación muy diferente a cómo se ha programado históricamente en JavaScript, y mucho más cercana a la manera de programar con otros lenguajes considerados más sólidos.

Si te decides por TypeScript, no te pierdas los próximos posts en los que iremos profundizando en este lenguaje y en cómo sacarle el máximo partido para construir aplicaciones web.

¿Qué opinas?

Tu dirección de correo electrónico no será publicada. * Campos obligatorios