Typescript también se puede configurar, para ello se hace uso de un fichero llamado tsconfig.json dentro de la raíz del proyecto.

Normalmente cuando usas un framework como Angular, VueJS o Svelte, al crear el proyecto la herramienta de CLI ya te pregunta si quieres crear el proyecto con Typescript y de paso te crea este fichero.

Quizás también te resulte interesante el artículo de Integración de Typescript en cualquier proyecto.

Configuración básica de un fichero tsconfig

Veamos un ejemplo de config muy sencilla y vamos comentando las opciones:

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Recommended"
}

En compilerOptions, como su nombre indica metemos las opciones que queremos indicar al compilador de Typescript.

  • outDir indica en qué carpeta Typescript va a dejar los ficheros .js compilados. Si esta opción no la seteas entonces Typescript va a dejar el .js en la misma carpeta que el fichero .ts que usa en la compilación.
  • En target indicamos la versión de Javascript a la que queremos compilar. Normalmente se suele poner es6 ya que es una versión que soportan todos los navegadores modernos. Otro posible valor es con el año, por ejemplo es2022.
  • En module ponemos que sistema de módulos queremos usar al compilar. Por ejemplo puedes hacer que los export sean estilo commonjs como este caso, umd, amd o incluso versiones de Javascript como es6
  • El campo strict es importante, indica a Typescript que tiene que ser mucho más estricto a la hora de pasar o no errores. Yo recomiendo siempre tenerlo activado. Tienes que saber que también puedes ser más selectivo en qué cosas quieres que sean estrictas y qué no, usando los campos alwaysStrict, strictNullChecks, strictBindCallApply, strictFunctionTypes o strictPropertyInitializa
  • esModuleInterop sirve para trabajar de una forma más sencilla entre los módulos CommonJS y de ECMAScript, recomiendo activarla siempre.
  • skipLibCheck. Esta setting ayuda a que Typescript tarde menos en compilar ya que no va comprobar el tipado en los ficheros de declaración. También ayuda en los casos en los que haya varias librerías iguales con distintas versiones y ficheros de declaración dentro de la carpeta node_modules.
  • forceConsistentCasingInFileNames. Esta opción ayuda a que Typescript tire un error en caso de que por ejemplo se intente importar un fichero con un nombre en un case distinto al del nombre del fichero. Por ejemplo intentar importar miFichero.ts usando "MiFichero.ts" en el import.

Indicar y excluir ficheros del build

La config que hemos visto antes usará los ficheros .ts que encuentre en el proyecto en el que se encuentre el tsconfig.json, pero podemos ser más específicos e indicar exactamente qué ficheros queremos que Typescript compile, para ello podemos usar el campo files:

{
  "compilerOptions": {
     ...
  },
  "files": [
    "example.ts",
    "users.ts",
    "utils.ts",
  ]
}

También tenemos a nuestra disposición el campo includes para poder meter un pattern y compilar por ejemplo todos los .ts de una carpeta en particular:

{
  "compilerOptions": {
     ...
  },
  "include": ["src/carpeta/**/*", "tests/**/*"]
}

Incluso existe una forma de excluir ficheros, pero ojo, puede que se sigan incluyendo si uno de los ficheros que has incluido hace un import. Se dice entonces que el exclude lo que hace simplemente es excluir ficheros que has indicado mediante el include:

{
  "compilerOptions": {
     ...
  },
  "include": ["src/**/*", "tests/**/*"],
  "exclude": ["src/carpeta/**/*", "tests/**/*"]
}

Extensión de la config

Esto es una funcionalidad muy interesante y que viene bien si tienes varios proyectos. Resulta que puedes crearte un fichero tsconfig.json para usar de base en otros proyectos.

Usar la config es tan sencillo como indicar la ruta en el campo extends. Es importante saber que primero se aplicará la config importada y luego las reglas declaradas en el fichero, por lo que en cada proyecto podrías sobreescribir alguna regla en particular

{
  "compilerOptions": {
     ...
  },
  "extends": "./configs/base",
}