TypeScript Academy · Lección

Reexportaciones y archivos barrel

Cree archivos index para simplificar las rutas de importación.

Lección 2 de 413 pasos

Reexportaciones y archivos barrel es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 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.

Bienvenida

Los archivos barrel (index.ts) agrupan y vuelven a exportar el contenido de los módulos, creando una API pública sencilla para un directorio y rutas de importación más limpias para quienes lo consumen.

Qué es un archivo barrel

Un barrel es un archivo index.ts que vuelve a exportar todo desde el mismo directorio. Quienes lo consumen importan desde el directorio en lugar de hacerlo desde archivos individuales.
// src/models/index.ts (barrel)
export { User } from './user';
export { Product } from './product';
export { Order } from './order';

Consumir el barrel

Importe desde el barrel en lugar de hacerlo desde archivos individuales para obtener rutas más limpias.
// Before barrel:
import { User } from '../models/user';
import { Product } from '../models/product';

// After barrel:
import { User, Product } from '../models';

Reexportación comodín con export *

Vuelva a exportar todas las exportaciones con nombre de un módulo mediante `export *`.
// index.ts
export * from './utils';
export * from './helpers';
export * from './validators';

Cambiar nombres durante la reexportación

Puede cambiar el nombre de las exportaciones al volver a exportarlas.
export { default as MyButton } from './Button';
export { Button as Btn } from './Button';

Reexportaciones solo de tipos

Vuelva a exportar tipos sin impacto en tiempo de ejecución.
export type { User, UserRole } from './user.types';

Archivo barrel para un módulo de funcionalidad

Las carpetas de funcionalidades de las aplicaciones grandes suelen tener un archivo barrel que expone únicamente la superficie pública.
// features/auth/index.ts
export { AuthProvider } from './AuthProvider';
export { useAuth } from './useAuth';
export type { AuthUser } from './types';

Riesgo de dependencias circulares

Los archivos barrel pueden introducir dependencias circulares si los archivos del mismo barrel se importan indirectamente entre sí a través del índice. Téngalo en cuenta.

Tree shaking y barrels

Los bundlers modernos (Webpack, Rollup, Vite) aplican tree shaking a las reexportaciones de los barrels. Solo las exportaciones que realmente se utilizan se incluyen en el bundle.

Barrels profundos frente a superficiales

Anide los barrels: cada subdirectorio tiene su propio index.ts y el barrel principal vuelve a exportar desde los barrels de los subdirectorios.
// src/index.ts
export * from './models';
export * from './services';
export * from './utils';

Archivos barrel y rendimiento de TypeScript

Los archivos barrel profundamente anidados pueden ralentizar la compilación de TypeScript. En proyectos grandes, considere aplanar la estructura o utilizar alias de rutas en su lugar.

Comprobación rápida

¿Cuál es la principal ventaja de utilizar un archivo barrel (index.ts)?

Resumen

Los archivos barrel (index.ts) vuelven a exportar desde un directorio y crean rutas de importación limpias. Utilice `export *` para reexportaciones masivas, `export type` solo para tipos y tenga presentes los riesgos de dependencias circulares en proyectos grandes.
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 «Reexportaciones y archivos barrel» es gratis?

Sí — el texto completo de «Reexportaciones y archivos barrel» 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 «Reexportaciones y archivos barrel»?

Cree archivos index para simplificar las rutas de importación. 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 4.

¿Cuánto tiempo toma la lección «Reexportaciones y archivos barrel»?

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. Sintaxis de módulos ES: import y export
  2. Reexportaciones y archivos barrel
  3. Importaciones y exportaciones solo de tipos
  4. Namespaces frente a módulos: uso moderno
← Volver a TypeScript Academy