Archivo tsconfig.app.json #

Este archivo es un archivo de configuración de TypeScript que define cómo el compilador (tsc) debe procesar los archivos fuente de tu aplicación principal (frontend). Es crucial para asegurar que TypeScript entienda tu código React, la sintaxis moderna de JavaScript y cómo se integra con Vite.

• Descripción: tsconfig.app.json extiende la configuración base de TypeScript (típicamente de tsconfig.json o tsconfig.base.json si existiera uno) y especifica opciones de compilador, librerías estándar a incluir, modo de resolución de módulos, y reglas de linting estrictas, todo adaptado para el contexto de una aplicación web moderna.
• Propósito:
  • Configurar el Compilador: Indica a TypeScript qué características del lenguaje y qué entornos de ejecución debe esperar y validar.
  • Asegurar la Compatibilidad: Garantiza que el código se compile correctamente para el entorno de destino (navegadores modernos).
  • Mejorar el Desarrollo con Tipos: Habilita reglas estrictas que ayudan a capturar errores de tipo en tiempo de desarrollo.
  • Integración con Vite/Bundlers: Configura el compilador para trabajar eficientemente con bundlers modernos.
• Secciones Clave:
  • compilerOptions: Contiene todas las opciones para el compilador de TypeScript.
    • tsBuildInfoFile: Ruta a un archivo donde TypeScript guarda información de compilación para construcciones incrementales, lo que acelera los builds.
    • target: "ESNext": (Actualizado) Especifica la versión más reciente de ECMAScript a la que se compilará el código JavaScript. Vite se encarga de la transpilación para navegadores específicos.
    • useDefineForClassFields: true: Es una opción importante para la compatibilidad con campos de clase en JavaScript moderno, relevante para Vite y la nueva especificación de campos de clase.
    • lib: ["ES2020", "DOM", "DOM.Iterable"]: Define las librerías de tiempo de ejecución que TypeScript debe incluir para el tipado. ES2020 para características de lenguaje, DOM para APIs del navegador y DOM.Iterable para soporte de iteradores en el DOM.
    • module: "ESNext": Especifica el sistema de módulos a usar para el código generado (generalmente el más reciente para que el bundler lo maneje).
    • skipLibCheck: true: Salta la verificación de tipos de los archivos de declaración de librerías (.d.ts). Puede acelerar la compilación, pero oculta errores en las librerías.
    • /* Bundler mode */: Comentarios para agrupar opciones relacionadas con el bundler.
    • moduleResolution: "bundler": Una estrategia de resolución de módulos moderna, optimizada para bundlers como Vite, que hace que TypeScript resuelva módulos de manera similar a cómo lo haría un bundler.
    • allowImportingTsExtensions: true: Permite importar archivos TypeScript usando extensiones .ts o .tsx en las declaraciones de importación.
    • isolatedModules: true: Asegura que cada archivo se compile como un módulo independiente. Es un requisito para ciertas herramientas de transpilación como Vite/Babel que operan archivo por archivo.
    • moduleDetection: "force": Fuerza a TypeScript a tratar todos los archivos como módulos.
    • noEmit: true: Indica a TypeScript que no genere archivos JavaScript de salida. En un proyecto Vite, Vite se encarga de la transpilación a JavaScript.
    • jsx: "react-jsx": Configura el soporte de JSX para React, utilizando la transformación JSX de React 17+.
    • /* Linting */: Comentarios para agrupar opciones relacionadas con el linting.
    • strict: true: Habilita un conjunto de reglas de tipado estrictas en TypeScript (ej., noImplicitAny, strictNullChecks), lo cual es altamente recomendado para la calidad del código.
    • noUnusedLocals: true: Advierte sobre variables locales no utilizadas.
    • noUnusedParameters: true: Advierte sobre parámetros de función no utilizados.
    • noFallthroughCasesInSwitch: true: Advierte sobre casos de switch sin break o return.
    • composite: true: Habilita el modo composite para proyectos que son parte de una solución de proyectos referenciados de TypeScript.
  • include: Define qué archivos y directorios debe incluir el compilador TypeScript para su procesamiento.
    • "src": Indica que todos los archivos dentro de la carpeta src deben ser compilados.
• Rol en el Proyecto: tsconfig.app.json es la guía del compilador TypeScript. Es fundamental para el desarrollo moderno de React/Vite, ya que garantiza la corrección de tipos, la compatibilidad del código y una experiencia de desarrollo robusta y con autocompletado.

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "composite": true
  },
  "include": ["src"]
}