En este módulo, veremos cómo organizar y reutilizar código en TypeScript utilizando módulos y espacios de nombres. También aprenderás cómo trabajar con librerías externas usando @types y cómo configurar el compilador de TypeScript para trabajar con módulos de manera eficiente.

---

6.1. Módulos en TypeScript: Importaciones y exportaciones

Los módulos en TypeScript te permiten organizar tu código en archivos separados, exportando partes del código que se pueden importar y reutilizar en otros archivos. Esto mejora la mantenibilidad y reutilización de código.

Exportaciones:

• export: Permite que una función, variable, clase u objeto sea visible y accesible desde otros archivos.
• export default: Solo puede haber una exportación por defecto en un archivo, y permite una sintaxis de importación simplificada.

Ejemplo de exportaciones:

Archivo matematicas.ts:

1export function sumar(a: number, b: number): number {
2  return a + b;
3}
4
5export const PI = 3.1416;
6
7export default class Calculadora {
8  restar(a: number, b: number): number {
9    return a - b;
10  }
11}

En este archivo, se están exportando la función sumar, la constante PI, y la clase Calculadora como exportación por defecto.

Importaciones: Para utilizar las funciones, constantes o clases exportadas desde otro archivo, se usa la palabra clave import.

Ejemplo de importaciones:

Archivo app.ts:

1import Calculadora, { sumar, PI } from "./matematicas";
2
3console.log(sumar(3, 5));        // 8
4console.log(`Valor de PI: ${PI}`);  // "Valor de PI: 3.1416"
5
6const calc = new Calculadora();
7console.log(calc.restar(10, 6));  // 4

En este caso, estamos importando la función sumar, la constante PI, y la clase Calculadora (la exportación por defecto) desde el archivo matematicas.ts.

6.2. Espacios de nombres (namespaces)

Los espacios de nombres (namespaces) permiten agrupar funciones, clases y variables bajo un mismo contexto o "espacio", evitando colisiones de nombres en el código.

Antes de los módulos, los espacios de nombres eran la forma principal de organizar código en TypeScript. Aunque los módulos son preferidos en la mayoría de los casos, los espacios de nombres siguen siendo útiles cuando se necesita agrupar lógicamente varias piezas de código sin dividirlo en múltiples archivos.

Ejemplo básico de espacio de nombres:

 
1namespace Geometria {
2  export function areaCuadrado(lado: number): number {
3    return lado * lado;
4  }
5
6  export function areaCirculo(radio: number): number {
7    return Math.PI * radio * radio;
8  }
9}
10
11console.log(Geometria.areaCuadrado(4));  // 16
12console.log(Geometria.areaCirculo(3));   // 28.274333882308138
Salida de Consola!:
16
28.274333882308138

En este ejemplo, el espacio de nombres Geometria agrupa las funciones areaCuadrado y areaCirculo. Al exportar las funciones, pueden ser accesibles desde fuera del espacio de nombres.

Espacios de nombres anidados:

También puedes anidar espacios de nombres para organizar aún más el código.

 
1namespace Geometria {
2  export namespace Volumen {
3    export function volumenCubo(lado: number): number {
4      return lado ** 3;
5    }
6  }
7}
8
9console.log(Geometria.Volumen.volumenCubo(3));  // 27
Salida de Consola!:
27

Aquí, el espacio de nombres Volumen está anidado dentro de Geometria, creando una organización jerárquica.

6.3. Uso de librerías externas con @types

TypeScript puede trabajar con librerías de JavaScript mediante el uso de tipos (type definitions) que describen las funciones y estructuras de esas librerías. Estos tipos se almacenan en paquetes de @types.

Si deseas utilizar una librería externa que no está escrita en TypeScript, puedes instalar su paquete de tipos para obtener soporte de tipado estático. La comunidad de TypeScript mantiene muchos de estos paquetes en el repositorio DefinitelyTyped.

Instalación de tipos para una librería externa: Supongamos que estás usando la librería lodash. Para obtener sus tipos:

1npm install lodash
2npm install @types/lodash --save-dev

Ahora puedes utilizar lodash con tipado completo en TypeScript:

Ejemplo:

1import _ from "lodash";
2
3let numeros = [1, 2, 3, 4, 5];
4let maximo = _.max(numeros);
5
6console.log(`El valor máximo es: ${maximo}`);  // "El valor máximo es: 5"

Gracias a @types/lodash, TypeScript ahora conoce los tipos que lodash usa y puede proporcionarte autocompletado, validación de tipos y sugerencias de errores.

6.4. Configuración del compilador para módulos

El archivo de configuración tsconfig.json es esencial para definir cómo se debe comportar el compilador de TypeScript. Al trabajar con módulos, es importante entender algunas opciones de configuración clave.

Opciones importantes para módulos en tsconfig.json:

• module: Define el sistema de módulos a utilizar. Algunas opciones comunes incluyen commonjs, es6, amd, y umd.

  1{
  2  "compilerOptions": {
  3    "module": "commonjs"
  4  }
  5}

  Esto es importante porque diferentes entornos requieren diferentes sistemas de módulos. Por ejemplo, commonjs se usa en Node.js, mientras que es6 se usa en navegadores modernos.

• moduleResolution: Controla cómo el compilador busca módulos en el sistema de archivos. Puede ser node o classic. Generalmente se usa node para seguir la resolución de módulos de Node.js.

  1{
  2  "compilerOptions": {
  3    "moduleResolution": "node"
  4  }
  5}

• esModuleInterop: Permite una interoperabilidad más sencilla entre los módulos de TypeScript y los módulos de CommonJS.

  1{
  2  "compilerOptions": {
  3    "esModuleInterop": true
  4  }
  5}

  Esto asegura que puedas importar librerías de CommonJS (como lodash) de manera más sencilla sin errores.

• outDir: Especifica el directorio donde se colocarán los archivos JavaScript compilados.

  1{
  2  "compilerOptions": {
  3    "outDir": "./dist"
  4  }
  5}

• rootDir: Define la carpeta raíz que contiene los archivos TypeScript.

  1{
  2  "compilerOptions": {
  3    "rootDir": "./src"
  4  }
  5}

• baseUrl y paths: Permiten configurar rutas relativas dentro del proyecto, facilitando la importación de módulos sin usar rutas largas y complicadas.

  Ejemplo de configuración:

  1{
  2  "compilerOptions": {
  3    "baseUrl": "./",
  4    "paths": {
  5      "@utils/*": ["src/utils/*"],
  6      "@components/*": ["src/components/*"]
  7    }
  8  }
  9}

  Con esta configuración, puedes importar módulos utilizando alias:

  1import { calcular } from "@utils/calculadora";

---

Resumen del Módulo 6

Este módulo cubrió los conceptos clave para organizar y estructurar tu código en TypeScript utilizando módulos y espacios de nombres. Aprendiste cómo exportar e importar código entre archivos, cómo agrupar lógicamente el código con espacios de nombres, y cómo utilizar librerías externas mediante los tipos definidos en @types. Además, exploramos la configuración del compilador de TypeScript para trabajar con módulos, incluyendo opciones como module, moduleResolution, y paths para mejorar la organización y mantenimiento del código.