Lo más frecuente al empezar a utilizar TypeScript es utilizar el comando tsc seguido de la ruta de nuestro archivo .ts para compilarlo. Sin embargo, TypeScript nos permite trabajar en “watch mode”, que es mucho más cómodo, así como configurar la forma en la que trabaja el compilador.
Cómo iniciar un proyecto de TypeScript y activar el watch mode
Para entrar en el “watch mode” simplemente tenemos que añadir la opción --watch (o -w) al comando tsc, antes de la ruta del archivo. El compilador observará el archivo y recompillará cada vez que hagamos cambios.
El problema es que seguimos observando un único archivo .ts. Así que… ¿cómo podemos activar el watch mode para que esté atento a todos los archivos .ts de nuestro proyecto?
Para ello deberemos lanzar el comando tsc --init, que creará un archivo tsconfig.json que identificará el proyecto como un proyecto de TypeScript. Este archivo nos permite configurar la forma en que se va a comportar el compilador. Además, disponiendo de él podemos lanzar tsc para compilar todos los archivos .ts del proyecto o tsc -w para observarlos.
Incluyendo o excluyendo rutas
El recién obtenido archivo tsconfig.json contiene un objeto compilerOptions, con las opciones aplicables al compilador que veremos más adelante.
Pero también podemos incluir otros elementos, como el array “exclude”, que admite rutas en las que además podemos utilizar wildcards para excluir archivos del proceso. Nótese que node_modules está excluida del proceso de compilación por defecto.
De modo contrario, podemos incluir un array “include”, que hará que solo se incluyan en la compilación las rutas indicadas. En caso de disponer de ambos campos, solo se compilarán los archivos incluidos en “include” pero no en “exclude”.
Excepcionalmente, en proyectos pequeños, podemos indicar únicamente qué archivos queremos compilar bajo el array “files”.
Las opciones del compilador
Por defecto, el tsconfig.json generado por tsc --init lleva comentada la mayoría de opciones disponibles para el compilador. Además, las acompaña de una pequeña descripción. Debido a ello, solo voy a analizar algunas de las opciones más relevantes.
target
Esta opción nos permite indicar la versión de JS (ECMAScript) a utilizar en nuestro código.
module
Nos permite indicar si vamos a generar CJS o ESM.
lib
Nos permite seleccionar qué librerías de declaración de tipos incluir en nuestro entorno. Por defecto llevaremos las relacionadas con nuestro “target”.
allowJs y checkJs
Nos permite utilizar algunas de las prestaciones de TS en proyectos donde no utilizamos archivos .ts, sino .js.
sourceMap
Mapea los archivos .js generados para facilitar el proceso de depuración de código, indicándonos directamente dónde están los errores dentro de nuestros archivos .ts.
outDir
Especifica la ruta donde se deben generar los archivos compilados.
rootDir
Especifica la ruta raíz de nuestro proyecto. Esto puede ser útil cuando tenemos diferentes directorios en raíz y nuestro proyecto se encuentra solo en uno de ellos (por ejemplo, directorios dir y src).
removeComments
Nos permite eliminar los comentarios de nuestro código compilado.
noEmit
Permite bloquear la emisión de archivos .js para limitar el trabajo del compilador a revisar nuestros archivos .ts y ofrecer feedback en consola.
noEmitOnError
Si lo configuramos a true no generará ficheros .js en caso de encontrar errores en nuestros archivos .ts. Ten en cuenta que en caso de encontrar cualquier error en cualquier archivo, el compilador evitará generar ninguno de los archivos .js.
strict y las opciones asociadas
Habilitar strict o cualquiera de sus opciones asociadas hará que el compilador sea más estricto a la hora de lanzar errores. Por ejemplo, podemos configurarlo para que dispare un error cuando utilicemos o no ciertos tipos o funcionalidades, como la inferencia de un tipo “any”.
Otras funcionalidades
Aquí me he limitado a indicar las configuraciones que editarás con más frecuencia. Pero recuerda que dispones de documentación oficial en la que se exponen en detalle todas las opciones de configuración y cómo utilizarlas.