Módulos ES (con nombre frente a predeterminados) y reexportaciones
Comprenda las exportaciones e importaciones con nombre y predeterminadas, y cómo reexportarlas para crear límites de módulo ordenados.
Módulos ES (con nombre frente a predeterminados) y reexportaciones es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 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: Utilizar ES Modules con confianza. Exportará e importará símbolos con nombre y predeterminados, y después los compondrá con reexportaciones para crear API públicas ordenadas.
Exportaciones/importaciones con nombre
Las exportaciones con nombre usan export antes de las declaraciones; impórtelas con llaves: import { name }.
// file: math.ts
export function add(a: number, b: number): number { return a + b }
export const PI = 3.14159
// file: app.ts
import { add, PI } from "./math"
console.log(add(2, 3), PI) // 5 3.14159Exportación/importación predeterminada
La exportación predeterminada es el valor principal de un módulo. Impórtela sin llaves: import Foo from "./mod".
// file: greet.ts
export default function greet(name: string) { console.log(`Hello, ${name}`) }
// file: app.ts
import greet from "./greet"
greet("Ada")Predeterminada y con nombre juntas
Puede combinar una exportación predeterminada con varias exportaciones con nombre en un módulo e importar ambas juntas.
// file: color.ts
export default "black"
export const palette = [ "red", "green", "blue" ]
// file: app.ts
import baseColor, { palette } from "./color"
console.log(baseColor, palette.length)Reexportaciones (barrels)
Las reexportaciones (export { x } from / export * from) crean un barrel, de modo que los consumidores importan desde un único punto de entrada.
// file: math/add.ts
export const add = (a: number, b: number) => a + b
// file: math/index.ts (barrel)
export { add } from "./add"
export * from "./more"
// file: app.ts
import { add } from "./math"
console.log(add(1, 2))Consejos y errores comunes
Consejos:
- Prefiera las exportaciones con nombre para facilitar el descubrimiento y mantener renombrados coherentes.
- Use la exportación predeterminada para el único elemento «principal» de un módulo.
- Construya barrels en los límites de los paquetes; evite las importaciones circulares.
Comprobación de la importación predeterminada
Comprobación rápida: ¿Qué importación corresponde a una exportación predeterminada?
Resumen
Resumen: use exportaciones con nombre para varios elementos, predeterminadas para un único valor principal y reexportaciones para presentar un punto de entrada limpio.
Preguntas frecuentes
¿La lección «Módulos ES (con nombre frente a predeterminados) y reexportaciones» es gratis?
Sí — el texto completo de «Módulos ES (con nombre frente a predeterminados) y reexportaciones» 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 «Módulos ES (con nombre frente a predeterminados) y reexportaciones»?
Comprenda las exportaciones e importaciones con nombre y predeterminadas, y cómo reexportarlas para crear límites de módulo ordenados. 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 1 de 3.
¿Cuánto tiempo toma la lección «Módulos ES (con nombre frente a predeterminados) y reexportaciones»?
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
- Módulos ES (con nombre frente a predeterminados) y reexportaciones
- Declaraciones ambientales (.d.ts) y tipados de terceros
- Mapeo de rutas y resolución de módulos