0Pricing
Frontend Academy · Lección

Compilar TS y tsconfig.json

Ejecute tsc para compilar TypeScript y configure el compilador con opciones de tsconfig.json como strict, target y outDir.

Compilar TS y tsconfig.json es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Instalación del compilador de TypeScript

Instale TypeScript como dependencia de desarrollo. La CLI tsc compila los archivos de TypeScript. Con Vite o Next.js, el empaquetador se encarga de la compilación, pero tsc todavía se utiliza para comprobar los tipos.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Inicialización de tsconfig.json

Ejecute npx tsc --init para generar un tsconfig.json con todas las opciones comentadas y valores predeterminados razonables. Este archivo es la configuración única del compilador de TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

Estructura de tsconfig.json

Las secciones principales son: compilerOptions (comportamiento del compilador), include (archivos que se deben compilar) y exclude (archivos que se deben omitir).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — versión de JavaScript de salida

target especifica qué versión de JavaScript genera tsc. Utilice ES2022 o ESNext para entornos modernos. ES5 ofrece la máxima compatibilidad, aunque normalmente Babel se encarga de ello.

module — sistema de módulos

module controla el formato de módulos de la salida. CommonJS se utiliza para Node.js. ESNext o ES2022 se utilizan con empaquetadores (Vite, webpack). NodeNext se utiliza con Node.js moderno y package.json type:module.

strict — indicador de estrictez

"strict": true habilita un conjunto de comprobaciones estrictas: strictNullChecks, noImplicitAny, strictFunctionTypes y otras. Actívelo siempre en los proyectos nuevos: detecta la mayoría de los errores.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — eliminación de errores de null

Con strictNullChecks habilitado, null y undefined no se pueden asignar a otros tipos a menos que se incluyan explícitamente en una unión. Esto le obliga a gestionar los casos de null.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir y rootDir

outDir especifica dónde se colocan los archivos JS compilados. rootDir establece la raíz de los archivos TypeScript de origen. Juntos, reflejan la estructura del código fuente dentro de dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — alias de módulos

Configure alias de rutas con la opción paths (y baseUrl). Esto permite importar @/components/Button en lugar de ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Modo de observación y solo comprobación de tipos

tsc --watch vuelve a compilar cuando cambian los archivos. tsc --noEmit comprueba los tipos sin generar archivos; resulta útil en CI para validar los tipos sin duplicar el trabajo del empaquetador.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Extensión de tsconfig.json

Utilice extends para heredar de una configuración base. Las configuraciones base compartidas, como @tsconfig/strictest, proporcionan buenas prácticas de la comunidad.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Comprobación rápida

¿Qué opción de tsconfig habilita el conjunto completo de comprobaciones estrictas de tipos?

Resumen: tsconfig.json

tsc compila TypeScript a JavaScript. tsconfig.json controla target (versión de ES de salida), module (sistema de módulos), outDir, strict y paths. strict: true detecta la mayoría de los errores. Utilice --noEmit en CI para realizar únicamente comprobaciones de tipos. Amplíe las configuraciones base de la comunidad para aplicar buenas prácticas.

Preguntas frecuentes

¿La lección «Compilar TS y tsconfig.json» es gratis?

Sí — el texto completo de «Compilar TS y tsconfig.json» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Compilar TS y tsconfig.json»?

Ejecute tsc para compilar TypeScript y configure el compilador con opciones de tsconfig.json como strict, target y outDir. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Compilar TS y tsconfig.json»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Por qué TypeScript: los tipos detectan errores en compilación
  2. Tipos primitivos, uniones y alias de tipos
  3. Interfaces y tipos de objeto
  4. Compilar TS y tsconfig.json
← Volver a Frontend Academy