Generador de tsconfig.json

Resultados

tsconfig.json tiene bastante más de cien opciones de compilador y cada tutorial de TypeScript enseña una combinación distinta. Este generador se ciñe a las que importan en la mayoría de proyectos: target, module, moduleResolution, jsx, los flags booleanos habituales (strict, esModuleInterop, skipLibCheck y compañía) y las carpetas outDir/rootDir. La vista previa del tsconfig.json se actualiza en vivo con cada cambio; cópiala a la raíz de tu proyecto y tendrás una configuración limpia sin las opciones muertas que arrastran la mayoría de plantillas.

Cómo se construye la configuración

  1. 1

    Elige target y module

    La versión de JavaScript que emite tsc (de ES2015 a ES2023, o ESNext) y el sistema de módulos (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    Define moduleResolution y JSX

    bundler para proyectos con Vite/webpack, node16/nodenext para Node moderno, node o classic para montajes antiguos. Pon jsx en react-jsx para React moderno o déjalo en none para omitir la clave.

  3. 3

    Activa o desactiva los flags

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap y forceConsistentCasingInFileNames como simples casillas.

  4. 4

    Fija las carpetas

    outDir y rootDir, preconfiguradas a ./dist y ./src. include y exclude quedan fijos en src/**/* más node_modules y dist.

  5. 5

    Copia el tsconfig generado

    La vista previa JSON se actualiza en vivo; un clic la copia, lista para colocarla como tsconfig.json en la raíz del proyecto.

Las opciones que escribe este generador

Opción Valor por defecto aquí Qué hace
target ES2022 Versión de JavaScript del código emitido. ES2022 es segura para navegadores y Node actuales; elige un target más antiguo solo para entornos legados.
module ESNext Sintaxis de módulos de la salida. Usa NodeNext/Node16 para proyectos Node con ESM y CommonJS para Node legado.
moduleResolution node Cómo se localizan los imports. Prefiere bundler con Vite/webpack/esbuild y node16/nodenext con Node moderno; node (node10) es el comportamiento clásico.
jsx omitida Solo se escribe si eliges un modo. react-jsx para React 17+, preserve cuando un bundler transforma el JSX.
strict true Activa toda la familia de comprobaciones estrictas. Déjalo activado en proyectos nuevos.
esModuleInterop true Arregla los imports por defecto de paquetes CommonJS.
skipLibCheck true Omite la comprobación de tipos de los .d.ts; compila mucho más rápido y rara vez oculta errores reales.
forceConsistentCasingInFileNames true Rechaza imports cuya capitalización no coincide con el archivo en disco (la rotura clásica al pasar de macOS a Linux).
resolveJsonModule true Permite import data from "./data.json".
allowJs false Admite archivos .js en la compilación; útil a mitad de una migración.
declaration false Emite archivos .d.ts; actívalo al publicar una librería.
sourceMap false Emite archivos .js.map para depurar.
outDir / rootDir ./dist / ./src Dónde va el código compilado y dónde viven las fuentes.
baseUrl "." Se escribe siempre, de modo que un bloque paths añadido a mano se resuelva desde la raíz del proyecto.

La salida por defecto exacta

Deja todos los controles como están y este es el archivo que obtienes:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

Si eliges un modo jsx distinto de none, se añade una entrada "jsx" a compilerOptions.

Modo estricto: qué activa realmente

strict: true es un flag paraguas que enciende toda la familia estricta, incluidos noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables y alwaysStrict. Los proyectos nuevos deberían empezar con todos activados: añadir rigor después es doloroso.

Errores comunes

  • Poner module: "CommonJS" en un proyecto Node con ESM. Si tu package.json dice "type": "module", usa NodeNext tanto en module como en moduleResolution.
  • Usar tsc como bundler. Es un compilador y comprobador de tipos. Usa Vite/esbuild/SWC para construir y tsc --noEmit para comprobar tipos.
  • Compilarlo todo. Sin una lista include, TypeScript recoge cada .ts que ve. La configuración generada escribe siempre include: ["src/**/*"] y excluye node_modules y dist, así que estás cubierto.
  • Necesitar más de lo que ofrece la configuración. Este generador se mantiene mínimo a propósito. Opciones como lib, paths, isolatedModules o noEmit son fáciles de añadir a mano una vez colocado el archivo base.

Preguntas frecuentes

En monorepos y proyectos multipaquete, sí: un archivo base con las opciones comunes y cada paquete extendiéndolo con “extends”. Para un repositorio de un solo proyecto, un único tsconfig.json como el generado es más simple.

Se introdujo en TypeScript 5.0 para proyectos construidos con Vite, webpack o esbuild. Refleja cómo resuelven los imports los bundlers en la práctica, sin las reglas de extensiones de archivo del ESM de node16/nodenext. Para código que ejecuta Node directamente, prefiere node16 o nodenext.

No hay un control dedicado. Eso sí, el archivo generado fija siempre baseUrl en “.”, así que puedes pegar un bloque paths justo debajo, por ejemplo “@/*”: [“src/*”], y se resolverá desde la raíz del proyecto.

Normalmente no, y por eso este generador lo omite: target implica un conjunto de tipos de librería acorde. Sobrescribe lib a mano solo en casos especiales, como APIs del DOM en un proyecto Node o tipos de WebWorker.

No hace falta registrarse y no se guarda nada. Tus selecciones solo se usan para renderizar la vista previa de la configuración, y en la vista paso a paso viajan además en la URL de la página, lo que facilita guardar en marcadores o compartir una configuración terminada.

Herramientas relacionadas

Herramienta disponible en otros idiomas