Cuando organizamos nuestro código en múltiples archivos, es común que cada archivo exporte un único elemento, como una clase o un tipo. Por ejemplo, podríamos tener un archivo producto.ts que exporta el tipo Producto, otro llamado almacen.ts que exporta el tipo Almacen, y otro más, calculadoraDeImpuestos.ts, que exporta la clase CalculadoraDeImpuestos. Sin embargo, cuando queremos importar ese único elemento, la sintaxis habitual con corchetes puede resultar un poco incómoda, ya que estamos usando una estructura pensada para múltiples exportaciones cuando solo necesitamos una.
Aquí es donde entran en juego los export default de ECMAScript moderno. Esta característica nos permite designar un único elemento como la exportación principal de un archivo. Por ejemplo, si en un archivo impuestos.ts queremos exportar solo una función llamada IVA, podemos declararla con export default. Esto significa que cuando importemos desde impuestos.ts, no necesitaremos usar corchetes, sino que podremos importar directamente la función con el nombre que queramos asignarle en el momento de la importación.
Veamos un ejemplo concreto. Supongamos que en impuestos.ts tenemos:
export default function IVA(cantidad: number): number {
return cantidad * 0.21;
}
Luego, en otro archivo, podemos importar esta función así:
import IVA from './impuestos';
const precioConIVA = IVA(100);
console.log(precioConIVA); // 21
Esta forma simplifica la importación cuando solo hay un elemento relevante en el módulo.
Pero, ¿qué pasa si queremos exportar más cosas además del default? ECMAScript permite combinar un export default con exportaciones normales. Por ejemplo, en impuestos.ts podríamos tener:
export default function IVA(cantidad: number): number {
return cantidad * 0.21;
}
export type Precio = number;
export type Impuesto = number;
Al importar, podemos traer el default sin corchetes y las otras exportaciones con corchetes:
import IVA, { Precio, Impuesto } from './impuestos';
const precio: Precio = 100;
const impuesto: Impuesto = 21;
const total = IVA(precio);
Es importante recordar que si no usamos corchetes, estamos importando el default. Si usamos corchetes, importamos las exportaciones nombradas.
Por otro lado, cuando tenemos múltiples funciones o elementos exportados sin un default, y queremos importar todo el contenido del módulo sin especificar cada elemento, podemos usar la sintaxis con asterisco. Esto nos permite importar todo como un objeto que contiene todas las exportaciones del módulo.
Por ejemplo, si en impuestos.ts tenemos varias funciones exportadas:
export function IVA(cantidad: number): number {
return cantidad * 0.21;
}
export function IRPF(cantidad: number): number {
return cantidad * 0.15;
}
Podemos importar todo así:
import * as impuestos from './impuestos';
const iva = impuestos.IVA(100);
const irpf = impuestos.IRPF(100);
Este objeto impuestos contiene todas las funciones exportadas y nos permite acceder a ellas mediante propiedades. Sin embargo, esta forma solo funciona con elementos que existen en tiempo de ejecución, no con tipos de TypeScript, ya que estos se eliminan tras la compilación.
Hay que tener en cuenta que importar todo un módulo con asterisco puede afectar al tamaño del bundle final en aplicaciones web, ya que se incluyen todas las exportaciones, aunque no se usen todas. Por eso, conviene usar esta técnica con precaución, especialmente en proyectos donde el tamaño y la optimización son importantes.
No obstante, en algunos casos, como al importar librerías de terceros que no se llevan bien con TypeScript, esta sintaxis puede ser útil para evitar problemas y tener acceso a todas las funcionalidades exportadas.
Así, con estas herramientas —export default, combinaciones con exportaciones normales, y la importación con asterisco— podemos manejar de forma flexible y eficiente la modularización de nuestro código en TypeScript y JavaScript moderno.