Exportando módulos

Cuando trabajamos con TypeScript, es habitual comenzar con ejemplos sencillos en un único archivo, especialmente cuando estamos aprendiendo o haciendo pruebas rápidas. Sin embargo, cuando el proyecto crece, como podría ser una aplicación para gestionar un almacén con cientos o miles de productos, mantener todo el código en un solo archivo se vuelve poco práctico y difícil de mantener. Por eso, es fundamental aprender a organizar nuestro código en módulos, que nos permitan dividir la lógica en partes más pequeñas y manejables.

Un módulo es básicamente un archivo que contiene un conjunto de funciones, tipos o clases relacionadas que cumplen una función específica. Por ejemplo, en un sistema de almacén, podríamos tener un módulo que defina el tipo Producto, con propiedades como nombre, descripción, precio, la URL de la imagen y un identificador SKU único. También podríamos tener un tipo Almacén, que represente un índice donde, a partir del SKU, podamos obtener información como el stock actual o la fecha de la última entrega. Además, podríamos incluir funciones auxiliares, como una que calcule la suma total de precios de una lista de productos.

export type Producto = {
  sku: string;
  nombre: string;
  descripcion: string;
  precio: number;
  imagenUrl: string;
};

type Almacen = {
  [sku: string]: {
    stock: number;
    ultimaEntrega: Date;
  };
};

export function sumarTotal(productos: Producto[]): number {
  let total = 0;
  for (const producto of productos) {
    total += producto.precio;
  }
  return total;
}

En este ejemplo, hemos marcado con export el tipo Producto y la función sumarTotal, lo que significa que estos elementos pueden ser utilizados fuera del archivo donde están definidos. En cambio, el tipo Almacen no tiene export, por lo que es privado para ese módulo y no puede ser accedido desde otros archivos. Esto es útil para encapsular detalles internos que no queremos exponer.

Cuando queremos usar estos tipos o funciones en otro archivo, por ejemplo, en un módulo que gestione facturas, nos encontramos con que TypeScript no reconoce automáticamente qué es un Producto, porque está definido en otro archivo. Una solución poco recomendable sería copiar la definición de Producto en el archivo de facturas, pero esto genera duplicación de código y problemas de mantenimiento, ya que cualquier cambio en la definición original tendría que replicarse manualmente en todos los lugares donde se copió.

La forma correcta es importar el tipo Producto desde el módulo donde está definido. Para ello, en el archivo de facturas escribimos:

import { Producto } from './almacen';

function procesarPedido(productos: Producto[]) {
  console.log('Procesando pedido:', productos);
}

Así, indicamos a TypeScript que el tipo Producto que queremos usar proviene del módulo almacen.ts. Esto nos permite reutilizar código y mantener una única fuente de verdad para nuestras definiciones.

Este sistema de exportar e importar módulos está basado en el estándar ESModules de ECMAScript 6, que es compatible con JavaScript desde 2015. TypeScript simplemente transpila estas declaraciones para que funcionen correctamente según la configuración de compilación que tengamos.

Además, esta organización modular nos ayuda a mantener el código limpio y fácil de entender. Podemos tener funciones internas o tipos auxiliares que no exportamos, manteniéndolos privados dentro del módulo, y solo exponemos lo necesario para que otros módulos puedan interactuar con nuestra lógica.

En resumen, dividir nuestro código en módulos con exportaciones e importaciones nos permite construir aplicaciones más grandes y complejas de forma ordenada, facilitando la reutilización y el mantenimiento a largo plazo.