tsconfig.json sin tener la chuleta en otra pantalla
Cada proyecto TypeScript empieza con un tsconfig.json y todo dev ha copiado en algún momento uno de una respuesta cualquiera de Stack Overflow, para encontrarse con un error de build dos días después. Hay unas 150 opciones del compilador y la documentación se lee como un impreso de Hacienda.
Este generador te deja arrancar desde un preset que refleja la plantilla oficial de tu stack: Next.js, Vite (React), una librería npm publicable o una API en Node. Cada opción aparece como un Switch o desplegable con una pista en lenguaje claro que explica lo que hace de verdad, no solo lo que dice su nombre.
El panel de vista previa en vivo a la derecha muestra el JSON resultante, listo para copiar o descargar. Cambias un switch y ves cómo cambia el JSON al instante. Sin adivinar, sin "¿lo he guardado?", sin tener una segunda pestaña abierta con el handbook de TypeScript.
Cómo se usa
- Elige un preset que encaje con tu proyecto. Next.js para una app Next 14+ típica, Vite (React) para una app Vite moderna, librería npm si publicas un paquete, API Node para un backend simple. Elige Custom si quieres un lienzo en blanco.
- Revisa la sección Básicos obligatorios: target, module, moduleResolution y strict. Estas cuatro deciden el 80 % de lo que hace tu tsconfig. La pista bajo cada una indica cuándo elegir qué.
- Si strict está activado, se abre la sección Modo strict con siete subopciones. Cada una atrapa una clase distinta de bugs. La pista explica qué tipo de errores detecta cada una.
- En Módulos e imports activa esModuleInterop (casi siempre lo querrás), resolveJsonModule si importas archivos `.json` y forceConsistentCasingInFileNames para equipos multiplataforma.
- En Salida define outDir (dónde va el JS compilado) y activa declaration si distribuyes archivos de tipos, sourceMap para depurar en navegador, incremental para acelerar recompilaciones.
- En JSX elige react-jsx para React 17+, preserve cuando un bundler gestione JSX (Next, Vite). Déjalo en `(none)` para un backend.
- En Alias de ruta define baseUrl (normalmente `.`) y añade alias como `@/*` → `./src/*`. Pulsa Añadir alias para mapear otro nombre corto. Eliminar quita una fila.
- A la derecha, la vista previa del tsconfig.json se actualiza mientras editas. Pulsa Copiar para llevarlo al portapapeles o Descargar archivo para guardarlo como `tsconfig.json` real.
Cuándo te resulta útil
Seis situaciones reales en las que un tsconfig de un clic gana:
- Empezar un proyecto nuevo. Quieres una configuración que "funcione" sin pasar una hora leyendo la documentación. Eliges un preset, copias la salida y listo en 60 segundos.
- Migrar un proyecto a modo strict. Tu código está en `strict: false` y quieres apretar la seguridad un flag cada vez. Los activas uno a uno, ves el JSON y lo pegas de vuelta en tu repo.
- Publicar tu primer paquete npm. Necesitas `declaration: true`, `isolatedModules`, un `outDir`, ningún DOM en el array lib. El preset librería npm lo hace por ti, sin adivinar si se te olvidó algo.
- Añadir alias de ruta. Quieres `@/components/Button` en lugar de `../../../components/Button`. El generador muestra la forma correcta del objeto paths, en vez de que tengas que recordar si es un array o un objeto.
- Comparar presets. Dudas si tu stack debería estar en módulo NodeNext o Bundler. Cambia entre presets y verás cómo difiere el JSON.
- Aterrizar a un dev nuevo. Cada opción tiene una pista, así que un junior puede leer qué hace noUncheckedIndexedAccess sin clavarse en la documentación.