TypeScript Academy · Lección

Compilación de TypeScript a JavaScript

Comprenda el compilador de TypeScript y su salida.

Lección 3 de 413 pasos

Compilación de TypeScript a JavaScript es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 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 TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Bienvenido

TypeScript no puede ejecutarse directamente en Node.js ni en el navegador. Primero debe compilarse a JavaScript. En esta lección aprenderá cómo funciona el compilador de TypeScript.

Instalación del compilador de TypeScript

Instale TypeScript como dependencia de desarrollo en su proyecto. El comando `tsc` estará disponible en los scripts locales después de la instalación.
npm install --save-dev typescript
npx tsc --version

Su primera compilación con tsc

Ejecute `tsc hello.ts` para compilar un solo archivo. El comando genera `hello.js` en el mismo directorio, con todos los tipos eliminados.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: la configuración del proyecto

En un proyecto real necesita un archivo `tsconfig.json`. Ejecute `tsc --init` para generarlo. Este archivo controla el destino, el formato de los módulos, el nivel de comprobación estricta, el directorio de salida y mucho más.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Opciones principales de tsconfig

Los campos más importantes de tsconfig son target (versión de ES de salida), module (sistema de módulos), outDir (carpeta de salida) y strict (habilita todas las comprobaciones estrictas).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Modo de observación con tsc --watch

Ejecute `tsc --watch` para volver a compilar automáticamente cada vez que guarde un archivo TypeScript. Esto agiliza el ciclo de desarrollo.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: comprobar tipos sin generar archivos

La opción `noEmit` ejecuta el comprobador de tipos sin escribir ningún archivo de salida. Resulta útil en canalizaciones de CI que utilizan un bundler como Vite o esbuild para realizar la compilación efectiva.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Alternativas más rápidas: ts-node y tsx

Durante el desarrollo puede ejecutar TypeScript directamente, sin un paso de compilación independiente, mediante `ts-node` o la herramienta más rápida `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Mapas de código fuente para depuración

Habilite `sourceMap: true` para que las herramientas de desarrollo del navegador y los depuradores de Node.js puedan relacionar las líneas del JS compilado con el código fuente original de TypeScript.
{ "compilerOptions": { "sourceMap": true } }

Archivos de declaración (.d.ts)

Con `declaration: true`, el compilador también genera archivos `.d.ts`. Estos permiten que otros proyectos TypeScript utilicen su biblioteca con toda la información de tipos.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

De forma predeterminada, los errores del compilador bloquean la salida

De forma predeterminada, si TypeScript contiene errores de tipos, `tsc` genera igualmente el JavaScript, pero termina con un código distinto de cero. Use `noEmitOnError: true` para detener la generación de archivos cuando haya errores.
{ "compilerOptions": { "noEmitOnError": true } }

Comprobación rápida

¿Qué se consigue al ejecutar `tsc --noEmit`?

Resumen

El compilador de TypeScript transforma archivos .ts en JavaScript. Configúrelo con tsconfig.json, use --watch durante el desarrollo, --noEmit para comprobar únicamente los tipos y ts-node/tsx para ejecutar TypeScript directamente.
Gratis para empezar

Aprende TypeScript con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
101
Lecciones
352

Preguntas frecuentes

¿La lección «Compilación de TypeScript a JavaScript» es gratis?

Sí — el texto completo de «Compilación de TypeScript a JavaScript» 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 TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Compilación de TypeScript a JavaScript»?

Comprenda el compilador de TypeScript y su salida. Practicas TypeScript 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 TypeScript Academy?

No se requiere experiencia previa. TypeScript 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 3 de 4.

¿Cuánto tiempo toma la lección «Compilación de TypeScript a JavaScript»?

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 TypeScript Academy?

Sí. Cada lección de TypeScript 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. Puntos problemáticos de JavaScript: errores en tiempo de ejecución
  2. Qué añade TypeScript a JavaScript
  3. Compilación de TypeScript a JavaScript
  4. Cuándo utilizar TypeScript en sus proyectos
← Volver a TypeScript Academy