Respuesta

TypeScript admite ambos sistemas de módulos principales de JavaScript: CommonJS y ES Modules, permitiendo el uso de las palabras clave import y export para organizar el código. La diferencia en TypeScript es la presencia de declaraciones de tipos, que pueden ser exportadas e importadas de la misma manera que los valores.

Por ejemplo, se puede exportar una interfaz:

// types.ts
export interface User {
  id: number;
  name: string;
}
// index.ts
import { User } from './types';
const u: User = { id: 1, name: 'Alice' };

También se admiten export type, export interface, import type, lo que permite importar solo tipos sin arrastrar código al bundle final, optimizando la compilación:

import type { User } from './types';

Una característica importante: en TypeScript se pueden exportar solo tipos que no aparecerán en el JavaScript final.

Pregunta capciosa

¿Cuál es la diferencia entre import { SomeType } from './file' y import type { SomeType } from './file'?

Respuesta incorrecta: Hacen lo mismo.

Respuesta correcta: import { SomeType } ... puede llevar a que todo el módulo sea importado e incluido en el JavaScript resultante, incluso si solo es un tipo. import type { SomeType } ... garantiza que se importa solo el tipo, en la fase de compilación, y no habrá efectos secundarios ni código en la salida.

Ejemplos de errores reales por desconocer los matices del tema

---

Historia

En un proyecto grande, el equipo importó tipos a través de importaciones comunes import { SomeType } ... desde un módulo con efectos secundarios (por ejemplo, que ejecuta código al requerir/importar). Como resultado, se arrastraron dependencias innecesarias y efectos secundarios en la construcción de producción, causando errores y aumentando el tamaño del bundle.

---

Historia

Un desarrollador decidió describir un tipo global a través de una variable global, y no a través de una declaración de tipo, y accidentalmente hizo una exportación de tipo y valor con los mismos nombres. Esto causó un conflicto de nombres en varios archivos y falló la construcción tras la actualización de TypeScript.

---

Historia

El equipo no distinguió las peculiaridades de export/import type y exportó tipos junto con datos. Como resultado, la herramienta de tree-shaking no pudo excluir código muerto, aumentando el bundle.