Cuando trabajamos con TypeScript y queremos organizar nuestro código en módulos, la palabra clave import juega un papel fundamental para traer solo las partes necesarias de otros archivos. Esto facilita la modularidad y hace que nuestro código sea más limpio y eficiente.
Para entender cómo funciona import, primero recordemos que export nos permite marcar qué elementos de un archivo estarán disponibles para otros. Por ejemplo, si en un archivo llamado almacén.ts exportamos un tipo llamado producto, en otro archivo, como facturas.ts, podemos usar import para indicarle a TypeScript que queremos usar ese tipo producto que está definido en almacén.ts.
La idea es que nuestro programa se convierte en un puzzle donde cada archivo es una pieza. Algunos archivos exportan ciertas partes, que son como agujeros que salen hacia afuera, y otros archivos tienen espacios que necesitan ser rellenados con esas partes exportadas. TypeScript y Node.js se encargan de juntar todas esas piezas. Cuando en facturas.ts usamos import para traer producto desde almacén.ts, estamos diciendo: “No sé qué es producto, pero sé que está definido en almacén.ts, así que tráemelo de ahí”.
La sintaxis para importar es bastante clara: después de la palabra import ponemos entre llaves los elementos que queremos traer, y luego usamos from seguido del nombre del archivo entre comillas, precedido por ./ para indicar que está en la misma carpeta. Por ejemplo:
import { producto } from './almacén';
Esto le dice a TypeScript que debe ir al archivo almacén.ts y traer la definición de producto. Si hacemos esto, cualquier error relacionado con no reconocer producto desaparece, y podemos usarlo con todas sus propiedades, como descripción o nombre.
Una ventaja importante de usar módulos es que si en algún momento extendemos el tipo producto, por ejemplo añadiendo una valoración, ese cambio se refleja automáticamente en todos los archivos que lo importan, como facturas.ts. Esto hace que mantener y escalar nuestro código sea mucho más sencillo.
Cuando compilamos este código TypeScript, si solo estamos importando tipos, el archivo JavaScript resultante no tendrá referencias a esos tipos porque JavaScript no maneja tipos en tiempo de ejecución. Por eso, en el archivo facturas.js no veremos ni import ni require relacionados con esos tipos. Sin embargo, si importamos funciones o variables reales, el compilador generará código para importarlas. Por ejemplo, si importamos una función sumarTotal y la usamos, el código JavaScript generado podría usar require para cargar esa función, especialmente si estamos trabajando con una versión antigua de ECMAScript que no soporta módulos nativos.
import { sumarTotal } from './almacén';
const total = sumarTotal(pedidos);
Este código, al compilarse, puede transformarse en algo así en JavaScript:
const { sumarTotal } = require('./almacén');
const total = sumarTotal(pedidos);
Históricamente, Node.js usaba require y exports para manejar módulos, lo que funcionaba bien en el servidor. Pero en el navegador, la situación era diferente y se desarrollaron otros sistemas como require.js, UMD o AMD. Finalmente, en 2015, se estandarizaron los ECMAScript Modules (ESM), que usan import y export.
Una gran ventaja de los módulos ECMAScript es que permiten técnicas como el tree-shaking, que significa “agitar el árbol”. Esto quiere decir que si importamos solo una función de una librería grande, las herramientas de construcción pueden eliminar el código que no usamos, reduciendo el tamaño final de nuestra aplicación. Por ejemplo, si una librería pesa 3 megas pero solo necesitamos una función, con import podemos traer solo esa función y el resto del código no se incluirá en el paquete final.
Esta capacidad de importar solo lo necesario hace que nuestros programas sean más ligeros y rápidos, especialmente en aplicaciones web donde el tamaño del código afecta directamente la experiencia del usuario. Por eso, hoy en día se prefiere usar import y export en lugar de require, ya que este último importa todo el módulo completo sin posibilidad de optimización.
En resumen, la palabra clave import en TypeScript nos permite construir aplicaciones modulares, mantener el código organizado y aprovechar optimizaciones modernas como el tree-shaking para entregar aplicaciones más eficientes tanto en el navegador como en el servidor.