tsconfig

Para proyectos de tamaño considerable, tsconfig.json es un archivo que se usa para configurar con mejor precisión un proyecto de TypeScript. En este capítulo explico cómo crear uno de estos archivos para ajustar de forma precisa la forma en la que se compila el proyecto.

Cuando trabajamos con TypeScript y empezamos a dividir nuestro código en múltiples archivos para organizar mejor un proyecto, surge la necesidad de compilar todo de manera eficiente y ordenada. Por ejemplo, si estamos desarrollando una aplicación para controlar el stock de una ferretería, podemos tener archivos separados como factura.ts o impuestos.ts para diferentes funcionalidades. Esto facilita la gestión del código, pero compilar cada archivo por separado puede volverse tedioso y propenso a errores.

Aquí es donde entra en juego el archivo tsconfig.json. Este archivo de configuración le indica a TypeScript cómo debe tratar todos los archivos que forman parte de un proyecto. En lugar de compilar archivo por archivo, podemos decirle a TypeScript que considere toda una carpeta como un proyecto completo y que compile todo de una vez, respetando las opciones que definamos en este archivo.

Para crear un tsconfig.json, simplemente ejecutamos el comando tsc --init en la raíz de nuestro proyecto. Esto genera un archivo con muchas opciones comentadas que podemos ajustar según nuestras necesidades. Por ejemplo, podemos configurar la versión de ECMAScript a la que queremos transpilar nuestro código usando la opción target. Si sabemos que nuestro entorno de ejecución soporta características modernas, como las interpolaciones de cadenas de ECMAScript 2018, podemos indicarle a TypeScript que no las transforme en concatenaciones, manteniendo un código más limpio y eficiente.

También podemos definir el sistema de módulos que queremos usar, como CommonJS, AMD, UMD o ES Modules, dependiendo de cómo queramos importar y exportar nuestros archivos. Si estamos trabajando con React, podemos habilitar el soporte para JSX. Además, es muy útil especificar un directorio de salida para los archivos compilados con la opción outDir. Por ejemplo, podemos indicar que todos los archivos JavaScript generados se coloquen en una carpeta llamada dist o compilado, evitando mezclar los archivos .ts con los .js y manteniendo nuestro proyecto más ordenado.

Otra opción importante es activar el modo estricto con strict, que habilita varias comprobaciones para evitar errores comunes, como el uso implícito de any o valores nulos sin control. Esto nos ayuda a mantener un código más robusto y seguro.

Una vez configurado el tsconfig.json, compilar el proyecto es tan sencillo como ejecutar tsc sin argumentos. TypeScript detectará automáticamente el archivo de configuración y aplicará todas las opciones definidas. Si no existe este archivo, el comando tsc sin parámetros dará un error, por lo que tener un tsconfig.json es fundamental para proyectos medianos o grandes.

Veamos un ejemplo básico de un archivo tsconfig.json que podríamos usar para un proyecto que se ejecuta en Node.js moderno y que queremos organizar con salida en una carpeta dist:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "CommonJS",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["./src/**/*"]
}

En este ejemplo, indicamos que queremos que el código se transpile a ECMAScript 2018, que use el sistema de módulos CommonJS, que los archivos compilados se coloquen en la carpeta dist, y que se active el modo estricto para mayor seguridad. Además, con include le decimos que compile todos los archivos TypeScript dentro de la carpeta src.

Con esta configuración, podemos estructurar nuestro proyecto en múltiples archivos dentro de src, y al ejecutar tsc, todo se compilará automáticamente y se colocará en dist, listo para ejecutarse en Node.js.

En definitiva, usar tsconfig.json es la forma más práctica y profesional de gestionar proyectos TypeScript, especialmente cuando creamos librerías o aplicaciones que requieren una estructura clara y una compilación controlada. Nos facilita la vida y mejora la mantenibilidad del código.

Lista de reproducción
  1. 1
    Temporada 1
    5 minutos
  2. 2
    ¿Qué es TypeScript?
    11 minutos
  3. 3
    Instalando TypeScript
    8 minutos
  4. 4
    Compilando un Hola Mundo sencillo
    7 minutos
  5. 5
    Hola Mundo pero con tipos
    10 minutos
  6. 6
    Tipos: tipos primitivos
    12 minutos
  7. 7
    Tipos: tipos especiales (any, null, ...)
    10 minutos
  8. 8
    Tipos: arrays y tuplas
    11 minutos
  9. 9
    Tipos: objetos
    7 minutos
  10. 10
    Funciones: lo básico
    9 minutos
  11. 11
    Funciones: tipando funciones
    9 minutos
  12. 12
    Clases: introducción a las clases
    9 minutos
  13. 13
    Clases: creando una clase
    10 minutos
  14. 14
    Clases: modificador private
    8 minutos
  15. 15
    Clases: modificador readonly
    3 minutos
  16. 16
    Clases: Atributos virtuales con getters y setters
    10 minutos
  17. 17
    Clases: herencia
    9 minutos
  18. 18
    Clases: modificadores abstract y protected
    8 minutos
  19. 19
    Tipos alias
    6 minutos
  20. 20
    Tipos literales
    5 minutos
  21. 21
    Uniones de tipos
    7 minutos
  22. 22
    Uniones discriminantes
    7 minutos
  23. 23
    Intersecciones de tipos
    5 minutos
  24. 24
    Interfaces: introducción
    7 minutos
  25. 25
    Interfaces: modificadores y funciones
    9 minutos
  26. 26
    Interfaces: usándolas con clases
    8 minutos
  27. 27
    Interfaces: herencia de interfaces
    8 minutos
  28. 28
    Interfaces: interfaces indizadas
    5 minutos
  29. 29
    Interfaces: funciones y tipos híbridos
    5 minutos
  30. 30
    ¿Qué diferencia hay entre interfaces y tipos? (2020)
    8 minutos
  31. 31
    Casteos con as
    6 minutos
  32. 32
    instanceof y las guardas
    9 minutos
  33. 33
    Tipos enumerados
    8 minutos
  34. 34
    Valores avanzados para enumerados
    7 minutos
  35. 35
    Enumerados con valores computados
    6 minutos
  36. 36
    Genéricos en tipos
    8 minutos
  37. 37
    Múltiples genéricos y buenas prácticas
    5 minutos
  38. 38
    Genéricos en funciones
    8 minutos
  39. 39
    Genéricos con restricciones
    6 minutos
  40. 40
    Tipos de utilidad
    3 minutos
  41. 41
    Exportando módulos
    9 minutos
  42. 42
    Importando módulos
    7 minutos
  43. 43
    Export default e import asterisco
    6 minutos
  44. 44
    tsconfig
    7 minutos
  45. 45
    Módulos desde NPM
    7 minutos
  46. 46
    Arroba types y los .d.ts
    8 minutos
  47. 47
    Ejemplo (1): creando una API REST simple en TypeScript
    11 minutos
  48. 48
    Ejemplo (2): montando un servidor Express
    8 minutos
  49. 49
    Ejemplo (3): haciendo las funciones de control de datos
    11 minutos
  50. 50
    Ejemplo (4): conectando todas las piezas
    7 minutos