Configuración de target, lib, module y JSX
Elija el target/lib adecuados para el JS generado y los elementos globales disponibles; configure module y JSX según su entorno de ejecución o bundler.
Configuración de target, lib, module y JSX es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 3. 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 3 lecciones en total.
Introducción
Objetivo: Elegir la estrategia adecuada de target (salida JS), lib (globales ambientales), module (forma de import/export) y JSX para su aplicación.
Opción target
target establece la versión de ECMAScript del JS generado, por ejemplo, ES2018 o ES2020. Elija la versión más antigua compatible con su runtime.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"target": "ES2020"
}
}
// TS may downlevel features based on target
const n = 10n; // BigInt requires ES2020+Opción lib
lib controla qué declaraciones de tipos globales se incluyen, por ejemplo, ES2020, DOM o WebWorker.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"lib": ["ES2020", "DOM"]
}
}
// Now Promise, fetch, and DOM globals are typed if includedOpción module
module establece el sistema de módulos, como CommonJS, ESNext o NodeNext. Adáptelo a las expectativas de Node o del empaquetador.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"module": "ESNext"
}
}
// ESM example
import { join } from "path";
export const p = join("a", "b");Opción jsx
jsx determina cómo TS transforma JSX: react, react-jsx o preserve. Elija la opción que espere su framework o empaquetador.
// React 17+ recommended
// tsconfig.json (excerpt)
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
// JSX files compile to React 17 runtime helpers (no need for import React)Preajustes
Use preajustes que coincidan con su stack. Las aplicaciones web necesitan DOM; los proyectos de Node normalmente lo omiten y eligen NodeNext para los módulos.
// Web app (Vite/React)
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM"],
"module": "ESNext",
"jsx": "react-jsx"
}
}
// Node (ESM)
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020"],
"module": "NodeNext"
}
}Comprobación de la opción lib
Comprobación rápida: ¿Qué controla la opción lib?
Resumen
Resumen: target ⇒ nivel del JS generado; lib ⇒ globales disponibles; module ⇒ forma de import/export; jsx ⇒ modo de transformación de JSX.
Preguntas frecuentes
¿La lección «Configuración de target, lib, module y JSX» es gratis?
Sí — el texto completo de «Configuración de target, lib, module y JSX» 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 3 lecciones en total.
¿Qué aprenderé en «Configuración de target, lib, module y JSX»?
Elija el target/lib adecuados para el JS generado y los elementos globales disponibles; configure module y JSX según su entorno de ejecución o bundler. 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 2 de 3.
¿Cuánto tiempo toma la lección «Configuración de target, lib, module y JSX»?
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
- Indicadores de estrictez
- Configuración de target, lib, module y JSX
- Referencias de proyecto (introducción)