TypeScript es un superconjunto de JavaScript, lo cual significa que a partir de la base de JS se añaden más características. En otras palabras: TypeScript es JavaScript con esteroides.
JavaScript no obliga a indicar tipos de variable en su definición, es un lenguaje con tipado dinámico, es decir, el tipo va asociado al valor y no a la variable.
Esto suele ser motivo de que nos equivoquemos y generemos errores que pueden ser difíciles de debugar. Queriendo poner remedio a esto, TypeScript añade a JavaScript las características necesarias para usarlo como si fuera un lenguaje con tipado estático.
Ya hace tiempo que tenía en mente incar el diente a TypeScript, y por fin me pongo a ello. Esta serie de posts me van a ayudar a desglosar todos los conceptos y características básicas de TypeScript para que sirva de referencia más adelante.
Aprovecho también para compartir una predicción que ya he leído y escuchado en diversos sitios: JavaScript acabará añadiendo nativamente funcionalidades para poder usarlo como si fuera un lenguaje tipado estático. Quién sabe cuándo, el tiempo dirá.
El rol de TypeScript
Los navegadores no pueden ejecutar archivos TypeScript. Por este motivo, será necesario compilar los archivos .ts a archivos .js.
Si al final el código escrito en TypeScript se convierte en JavaScript normal y corriente, y JavaScript no es un lenguaje tipado estático... ¿Dónde está el truco? Pues no lo hay.
JavaScript es un lenguaje muy flexible y podemos convertirlo en un lenguaje de tipado estático si queremos, pero eso conllevaría hacer un montón de comprobaciones y a generar mucho código difícil de mantener y poco escalable.
TypeScript nos permite usar una sintaxis simple para tipar variables y al compilar se encarga de generar todo el código JavaScript necesario haciendo la comprobación de tipos en ese momento.
La gran ventaja de los lenguajes con tipado estático es que, aunque puedan parecer un suplicio, nos permiten detectar errores antes de que se ejecute el código evitándonos quebraderos de cabeza más adelante.
Instalación de TypeScript
En la página de descargas de la web oficial de TypeScript hay indicaciones de las formas en que podemos instalarlo.
Será necesario tener instalado Node. Creo que la forma más simple de instalar TypeScript es añadiendo la dependencia en el proyecto donde queremos usarlo con el comando:
npm install typescript --save-dev
Importante ejecutar el comando estando situado previamente en la carpeta del proyecto. Esto generará la carpeta node_modules y el archivo package-lock.json con la configuración necesaria.
También es posible instalar TypeScript de forma global en vez de a nivel de proyecto. Yo personalmente prefiero hacerlo a nivel de proyecto y no guardar roña en el equipo de forma permanente.
El comando que usaremos a partir de este momento para compilar los archivos TypeScript es:
npx tsc archivo.ts
Y si queremos activar el modo observador, para que al hacer cambios y guardar se recompile automáticamente, podremos hacer lo siguiente:
npx tsc archivo.ts --watch
Funcionalidades que aporta TypeScript (a parte de tipado estático)
Si usas las funcionalidades más nuevas de JavaScript, no te preocupes por la compatibilidad con navegadores. El compilador de TypeScript lo convertirá en JavaScript compatible, no necesitas instalar un transpilador como Babel o similares.
También tendremos disponibles características típicas de otros lenguajes nunca vistas en JavaScript, como interfaces o genéricos. Ya veremos qué son en otros artículos.
Podremos usar características de la meta programación, como los decoradores.
A través del archivo de configuración podremos adaptar TypeScript a nuestras necesidades, haciéndolo más o menos estricto.
Finalmente, tendremos disponibles varias herramientas de desarrollo moderno que nos pueden ser útiles incluso en proyectos donde no estemos usando TypeScript.
Es importante entender también que el sistema de tipado nos va a ayudar únicamente en la etapa de desarrollo, antes de que el código sea compilado. TypeScript no va a cambiar nada en el código final JavaScript.
Si quieres saber más, puedes echar un ojo a la siguiente parte de esta introducción a TypeScript, donde ya nos empezaremos a ensuciar las manos.