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.

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

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.

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.