En el artículo anterior de Introducción a TypeScript, ya vimos cómo realizar la transpilación (compilar de TS a JS) de forma manual.

En este, artículo, vamos a explicar cómo automatizar este proceso de transpilación para que nos lo realice de forma automáticamente VSC mediante a un pluggin.

Instalación del plugin

Para ello, iremos a VSC y buscaremos typescript en su buscador e instalaremos el plugin de Eno yao.

Realizando nuestra primera compilación (directorio dist)

Si ahora creamos un proyecto con un fichero de HTML y otro de TYPESCRIPT (por el momento vacío):

Podemos ver que tenemos el compile hero a off eso significa apagado. Si le pulsamos encima, cambiará a On y ya lo tendremos trabajando. Si ahora escribimos por ejemplo un console.log en nuestro archivo main.js, podemos ver que el archivo se transpila automáticamente pero que no lo hace en el directorio raíz, sino en el directorio dist.

Modificando el directorio de guardado de la transpilación del fichero JS

A mí personalmente, no me gusta que me cree un directorio donde guardará los archivos una vez se realice la transpilación. Por tanto, una vez instalado, pulsaremos sobre la configuración del pluging (mediante a la tuerca) e iremos a Extension Settings.

Y editaremos la ruta de compilación que apunta al directorio ./dist en TODOS LOS CAMPOS:

A la ruta raíz:

Realizando nuestra segunda compilación (directorio raíz)

Si eliminamos los archivos que nos ha creado el plugin del directorio y lo dejamos como en su inicio:

Si nuevamente editamos el fichero main.ts (con el pluggin escuchando en ON) podremos ver que ahora sí que nos guarda dentro del directorio raíz.

Si nos metemos dentro del archivo vemos que tenemos la transpilación realizada a JS:

Ahora, finalmente solamente tenemos que asociarlo a:

Ya podemos abrir nuestro HTML y ver los cambios en la consola del inspector:

Ya habéis visto la utilidad de este plugin. ¡Saludos y hasta pronto!