Configurar un proyecto para usar TypeScript

  • Por
Cómo configurar un proyecto a desarrollar en el que quieras usar TypeScript como lenguaje, mediante el watch que permita compilar automáticamente los archivos a Javascript.

TypeScript es un superset de Javascript, un lenguaje que añade un montón de posibilidades a Javascript, que seguramente muchos desarrolladores agradecerán. Como ya hemos hablado de TypeScript en diversos artículos anteriormente, no vamos a ahondar en los conceptos, sino que iremos directamente a la práctica, explicando qué hacer si quieres comenzar a usar TypeScript. No obstante, si quieres saber más sobre este lenguaje, te recomendamos la lectura del artículo Introducción a TypeScript.

Supongamos que deseas comenzar un proyecto y quieres usar TypeScript como lenguaje, para beneficiarte de sus ventajas, o simplemente para practicar y ponerte al día. Entonces tendrás que realizar una serie de pasos esenciales, que te permitan compilar el código de tu aplicación a Javascript de toda la vida. Esta es una tarea fundamental, porque los navegadores (o NodeJS) no entienden TypeScript y necesitas proveer código Javascript estándar.

Además, cada vez que se cambia el código de un programa, no quieres estar lanzando comandos por consola para compilarlo a Javascript, sino que quieres que esa traducción se realice de manera automática. Para ello necesitas un "watcher", que no es más que un vigilante que detecta cambios en el código fuente, desatando los procesos de compilación de los archivos para pasar a Javascript. Todo esto es lo que te vamos a enseñar en este artículo.

Nota: el proceso de compilación o traducción de TypeScript a Javascript se conoce habitualmente como transpilación, que es una jerga habitual de los desarrolladores, a mitad de camino entre traducción y compilación.

Archivo tsconfig.json

El archivo tsconfig.json es el que indica en un proyecto que se está trabajando con TypeScript. Lo colocas en la raíz de carpetas del proyecto y en él situamos un JSON con todas las configuraciones de trabajo para el transpilador de TypeScript.

El archivo tsconfig.json puede tener decenas de configuraciones, útiles para cada tipo de desarrollador o tipo de proyecto, pero una versión muy elemental podría ser la que nos encontramos aquí:

{
  "compilerOptions": {
    "target": "es5",
    "outDir": "dist",
    "rootDir": "src"
  }
}

Básicamente le estamos diciendo:

  • target: indicamos que queremos que compile a código Javascript escrito con el estándar ES5, que es el que todos los navegadores comprenden, incluso los Internet Explorer más antiguos.
  • outDir: indicamos el directorio donde se van a colocar los archivos Javascript, ".js", una vez transpilados.
  • rootDir: indica dónde están los archivos fuente, con el código TypeScript, ".ts", que debe ser traducido.

Lanzar el compilador TypeScript con el watcher

Como hemos dicho, necesitamos el watcher para evitarnos el trabajo manual de lanzar la compilación de los archivos fuente, cada vez que éstos se modifican. Esta tarea la puede realizar el compilador de TypeScript, sin necesidad de ninguna herramienta adicional.

Obviamente, necesitamos tener instalado el compilador en nuestro sistema y aunque ya explicamos esto previamente en la Introducción a TypeScript, se hace vía npm con el comando:

npm install -g typescript

Luego nos tenemos que situar con el terminal en el directorio raíz del proyecto, donde está el tsconfig.json, y lanzamos el comando que activa el watcher.

tsc -w
Nota: Si en este momento no teníamos ningún archivo a traducir, nos mostrará un error con algo como "No inputs were found...".

Ahora no tenemos más que editar los archivos TypeScript y ver cómo se compilan desde la consola. Es importante insistir en que los archivos TypeScript deben estar en el directorio configurado en "rootDir" y que se crearán los archivos Javascript transpilados en el directorio "outDir". Tal como lo tengas configurado en el tsconfig.json.

Resumen del proceso de trabajo con TypeScript

Ahora veremos un ejemplo del proceso, dado el código de tsconfig.json que hemos indicado al principio de este artículo. Partimos de un esquema de carpetas y de directorios como el que sigue:

En nuestro archivo main.js podríamos haber colocado un código como el que sigue:

function potencia(base: number, potencia: number) {
  return Math.pow(base, potencia);
}

console.log(potencia(2,3));

Entonces lanzamos el comando de consola "tsc -w", con lo que obtendremos una salida como la siguiente:

Ahora puedes probar a realizar algún cambio en el archivo main.ts y verás que el watcher se activa inmediatamente, indicando que ha detectado cambios en los ficheros "File change detected. Starting incremental compilation..."

Hasta aquí todo fue correcto, pero ahora vamos a provocar un error en el código TypeScript, para que veamos cómo el compilador nos advierte. Simplemente vamos a enviarle una cadena a la función potencia(), cuando lo que esa función esperaba era dos números.

Para comenzar, si tu editor soporta TypeScript, como es el caso de Visual Studio Code, ya te advertirá con una marca roja.

Nota: si no usas VSCode, que ya viene con todo lo necesario para ofrecerte ayudas en tiempo de programación con TypeScript, seguramente encontrarás un plugin que haga algo similar.

Pero además el compilador, por consola, también se quejará de los cambios cuando grabes el archivo.

De momento eso es todo, esperamos que esta ayuda te sirva para experimentar con TypeScript y compilar tu propio código de una manera cómoda y automatizada.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Daniel Ruiz

10/10/2017
Buenas notas
Este artículo va para favoritos.

Muchas gracias!

Sergio

17/10/2017
TypeScript
Aclarador, a ver si lo incorporamos en algún proyecto. Gracias