export default vs export: ¿qué elegir en TypeScript?

TypeScript export vs default export: lo aclaramos de una vez por todas

¡Hola, amigo! Si estás empezando tu camino en TypeScript (o ya no eres principiante, pero aún te confundes con las exportaciones), este artículo es tu salvavidas. El tema "TypeScript export vs default export" es uno de los más candentes en Stack Overflow, y no es para menos. Parece un detalle, ¡pero cuántas discusiones ha generado! Vamos a desglosarlo paso a paso y recordar de una vez por todas cuándo usar export y cuándo usar export default.

No nos limitaremos a enumerar reglas de forma aburrida. Analizaremos ejemplos reales, errores típicos de principiantes y daremos recomendaciones concretas. ¡Allá vamos!

¿Qué es la exportación en TypeScript y para qué sirve?

Imagina que estás escribiendo un programa grande. ¿Acaso meterías todo el código en un solo archivo? Claro que no. Lo divides en módulos: un archivo se encarga de los usuarios, otro de los cálculos, otro de la interfaz. La exportación es la forma de decirle a TypeScript: "Oye, esta función, clase o variable se puede usar en otros archivos". Y la importación es la forma de decir: "Dame esa cosa de otro archivo".

En TypeScript hay dos tipos principales de exportación: exportación nombrada (named export) y exportación por defecto (default export). Y aquí empieza lo interesante.

Exportación nombrada (named export): precisión y orden

La exportación nombrada es cuando indicas explícitamente el nombre de lo que exportas. Es como si pusieras una etiqueta brillante en cada caja de tu garaje: "Herramientas", "Equipo deportivo", "Libros viejos".

La sintaxis es muy simple. Solo añade la palabra clave export antes de la declaración:

Ejemplo de exportación nombrada

// utils.ts\nexport const PI = 3.14159;\n\nexport function calculateArea(radius: number): number {\n  return PI * radius * radius;\n}\n\nexport class Circle {\n  constructor(public radius: number) {}\n}

Ahora importamos esto en otro archivo:

// app.ts\nimport { PI, calculateArea, Circle } from './utils';\n\nconsole.log(PI); // 3.14159\nconst area = calculateArea(5);\nconst myCircle = new Circle(10);

Observa las llaves { } al importar. Son una señal inequívoca de exportación nombrada. Puedes importar solo lo que necesitas y estás obligado a usar los mismos nombres que se indicaron al exportar (o renombrarlos con as, pero de eso hablaremos después).

Ventajas de la exportación nombrada

\n
• Claridad: Siempre ves exactamente qué se exporta del módulo.
\n
• Autocompletado: El IDE (por ejemplo, VS Code) sugiere muy bien los nombres al importar.
\n
• Refactorización: Si renombras una función exportada, el IDE la renombra en todos los lugares donde se importa. Es seguro.
\n
• Tree-shaking: Los empaquetadores (Webpack, Vite) pueden "sacudir" el código no utilizado, reduciendo el tamaño del bundle final.
\n

Exportación por defecto (default export): comodidad y concisión

La exportación por defecto es cuando dices: "En este archivo hay una entidad principal, y quiero que sea fácil de importar". Es como si dijeras: "Aquí está mi tarjeta de presentación, tiene lo esencial".

Cada módulo puede tener solo una exportación por defecto. Sintaxis:

Ejemplo de exportación por defecto

// logger.ts\nconst log = (message: string): void => {\n  console.log(`[LOG]: ${message}`);\n};\n\nexport default log;

O puedes declararlo directamente:

export default function log(message: string): void {\n  console.log(`[LOG]: ${message}`);\n}

La importación se ve así (¡sin llaves!):

// main.ts\nimport myLog from '