TypeScript: Depuración de errores y tsconfig.json

El archivo tsconfig.json es el centro de control del compilador: define cómo TypeScript interpreta, verifica y transforma tu proyecto. Una configuración bien afinada no solo previene errores, sino que mejora la experiencia de depuración y la calidad del JavaScript resultante. Cerremos la serie dominando esta pieza. La referencia completa está en la documentación oficial de tsconfig.json.

Qué es tsconfig.json y para qué sirve

tsconfig.json declara el comportamiento del compilador para todo el proyecto. Cuando se genera por primera vez, muchas opciones aparecen comentadas, y el valor mostrado en el comentario suele ser el recomendado por defecto.

Opciones recomendadas

Estas opciones de compilerOptions aportan el mayor valor en un proyecto profesional:

• strict: activa el conjunto completo de comprobaciones estrictas. Es la opción que más errores previene.
• noImplicitAny: prohíbe que TypeScript asigne any de forma implícita cuando no puede inferir un tipo, obligándote a ser explícito.
• removeComments: elimina los comentarios del JavaScript compilado, produciendo una salida más limpia.
• sourceMap: genera source maps que enlazan el JavaScript emitido con tu código TypeScript original.

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es2015",
    "module": "commonjs",
    "outDir": "dist"
  },
  "include": ["src"]
}

sourceMap: depurar el código original

Sin source maps, cuando depuras en el navegador o en Node solo ves el JavaScript transpilado, que puede diferir notablemente de tu TypeScript. Con sourceMap: true, el compilador genera archivos .js.map que permiten al depurador mostrar tu código fuente original, colocar breakpoints en él e inspeccionar variables con sus nombres reales.

Esta opción es la diferencia entre depurar el código que escribiste y depurar el código que la máquina generó.

Generar un único archivo de salida

Para ciertos escenarios —especialmente proyectos de frontend sin un bundler— resulta útil concatenar toda la salida en un solo archivo JavaScript. Esto se logra con la opción outFile:

{
  "compilerOptions": {
    "outFile": "./main.js",
    "sourceMap": true,
    "removeComments": true
  }
}

Depurar errores con eficacia

El flujo de depuración en TypeScript combina las opciones anteriores con la lectura disciplinada de los mensajes del compilador:

• Cada error incluye un código (por ejemplo TS2345) que puedes buscar para entender su causa raíz.
• Con strict activo, los errores afloran en compilación, antes de ejecutar el código.
• Con sourceMap, los errores en tiempo de ejecución apuntan a tu TypeScript original, no al JavaScript emitido.
• El modo observador (tsc --watch) reporta los errores de forma incremental mientras escribes.

flowchart LR
    A[Código TS] --> B[tsc con strict]
    B -- error de tipo --> C[Mensaje TSxxxx
en compilación]
    B -- ok --> D[JS + sourceMap]
    D --> E[Runtime]
    E -- error --> F[Stack trace sobre TS
gracias al sourceMap]

Conclusión

tsconfig.json es la herramienta que transforma TypeScript de un transpilador genérico en un compilador afinado a tu proyecto. Activar strict y noImplicitAny maximiza la detección temprana de errores; sourceMap hace que la depuración opere sobre tu código real; y removeComments pule la salida. Dominar estas opciones cierra el ciclo: del tipado en el editor a la depuración en producción.

Con esto concluye la serie sobre TypeScript. Has recorrido desde la instalación y los tipos básicos hasta los genéricos, los decoradores y la configuración del compilador: el conjunto de herramientas necesario para construir aplicaciones robustas y mantenibles con tipado estático.