Generación de tsconfig.json: ¿qué se esconde bajo el capó?

Introducción: ¿Por qué tsconfig.json no es solo un archivo?

Cualquiera que haya escrito alguna vez en TypeScript se ha encontrado con el misterioso archivo tsconfig.json. Si eres principiante, lo más probable es que lo hayas copiado de la documentación o hayas buscado en Google «cómo generar tsconfig.json». Y si eres un desarrollador experimentado, quizás alguna vez te hayas preguntado: ¿qué sucede realmente bajo el capó cuando ejecuto tsc --init?

En este artículo no solo te daremos una receta ya preparada, sino que nos adentraremos en la sala de máquinas del compilador de TypeScript. Aprenderás cómo el compilador lee la configuración, qué banderas controlan el rigor del código y cómo escribir tu propio «generador» mínimo de tsconfig.json sobre la marcha. ¡Allá vamos!

1. ¿Qué es tsconfig.json y para qué sirve?

tsconfig.json es un archivo JSON que le indica al compilador de TypeScript (tsc) cómo exactamente procesar tu código. Sin él, tsc funcionará en modo «predeterminado», pero a menudo esto no es suficiente para proyectos serios.

Bajo el capó, tsconfig.json define:

\n
• Qué archivos compilar (claves include, exclude, files).
\n
• Dónde colocar el resultado (clave outDir).
\n
• Qué versiones de JavaScript soportar (clave target).
\n
• Qué tan estrictamente verificar los tipos (claves strict, noImplicitAny, etc.).
\n
• Módulos y rutas adicionales.
\n

Cuando te preguntas «how can I generate a tsconfig.json file», la respuesta suele ser una: tsc --init. Pero analicemos qué genera exactamente este comando.

2. El comando tsc --init: ¿qué hay bajo el capó?

Ejecuta en la terminal:

npx tsc --init

En la raíz del proyecto aparecerá un archivo tsconfig.json con un montón de configuraciones comentadas. En realidad, bajo el capó, el compilador de TypeScript ejecuta el siguiente algoritmo:

\n
1. Verifica si ya existe tsconfig.json en el directorio actual.
\n
2. Si no existe, crea una plantilla con la configuración predeterminada.
\n
3. Establece target: "es2016", module: "commonjs", strict: true y otros valores razonables.
\n
4. Comenta todas las demás opciones para que el desarrollador pueda descomentarlas si es necesario.
\n

Pero, ¿y si quieres personalizar la generación? Por ejemplo, activar el modo estricto de inmediato o establecer una ruta para los archivos de salida. Para ello, puedes escribir tu propio script.

2.1. Ejemplo: tu propio generador de tsconfig.json en TypeScript

Imagina que estás escribiendo una herramienta para la configuración automática de proyectos. Así es como podría verse una función que genera tsconfig.json bajo el capó:

import * as fs from 'fs';\nimport * as path from 'path';\n\ninterface TsConfig {\n  compilerOptions: {\n    target: string;\n    module: string;\n    strict: boolean;\n    outDir: string;\n    rootDir: string;\n    esModuleInterop: boolean;\n    skipLibCheck: boolean;\n    forceConsistentCasingInFileNames: boolean;\n  };\n  include: string[];\n  exclude: string[];\n}\n\nfunction generateTsConfig(\n  target: string = 'ES2020',\n  outDir: string = './dist',\n  rootDir: string = './src',\n  strict: boolean = true\n): TsConfig {\n  return {\n    compilerOptions: {\n      target,\n      module: 'commonjs',\n      strict,\n      outDir,\n      rootDir,\n      esModuleInterop: true,\n      skipLibCheck: true,\n      forceConsistentCasingInFileNames: true,\n    },\n    include: ['src/**/*'],\n    exclude: ['node_modules', 'dist'],\n  };\n}\n\n// Generamos y guardamos\nconst config = generateTsConfig();\nfs.writeFileSync(\n  path.join(process.cwd(), 'tsconfig.json'),\n  JSON.stringify(config, null, 2)\n);\nconsole.log('¡tsconfig.json creado!');\n