Cómo Usar Alias de Rutas de TSConfig para Mejorar tu Código

Los alias de rutas de TSConfig son una herramienta poderosa que puede ayudarte a mejorar la legibilidad, mantenibilidad y prevención de errores de tu código TypeScript. Esto permite un código limpio más fácil de leer, y nos permite mover archivos sin tener que actualizar las rutas de importación en cada archivo.

Esto es un gran ahorro de tiempo.

¿Qué Son los Alias de Rutas?

El objetivo es reemplazar las siguientes declaraciones de importación:

// ruta de importación relativa
import MyComponent from "../../../components/MyComponent";

con estas declaraciones de importación:

// ruta de importación con alias
import MyComponent from "@components/MyComponent";

Podemos hacer esto con un archivo tsconfig.json o jsconfig.json. Usaremos TypeScript en esta publicación.

Cómo Configurar Alias de Rutas

Añadiendo Alias de Rutas a tu Archivo TSConfig

Necesitamos actualizar nuestro archivo tsconfig.json para habilitar los alias. Añadiremos las propiedades paths y baseUrl al objeto compilerOptions. Cada ruta es relativa a baseUrl.

Esto le dirá a TypeScript que reemplace el alias con la ruta real al compilar el código.

{
  "compilerOptions": {
    "baseUrl": ".", // raíz de tus "paths" de abajo. Requerido si "paths" está definido
    "paths": {
      "@components/*": ["src/components/*"] // nos permite usar @components/MyComponent
    }
  }
}

Usando Alias de Rutas en tu Código

Ahora en todos tus archivos fuente, puedes importar componentes así:

// Sin alias de rutas
import Hero from "../../../components/Hero";
import Footer from "../../../components/Footer";

// Con alias de rutas
import Hero from "@components/Hero";
import Footer from "@components/Footer";

¿Por Qué Debería Hacer Esto?

Digamos que tenemos la siguiente estructura de archivos:

.
└── src/
    ├── components/
    │   ├── Hero.tsx
    │   └── Footer.tsx
    └── pages/
        ├── index.tsx
        └── solutions.tsx

Importaciones Relativas Molestas

Si queremos importar Hero.tsx y Footer.tsx en index.tsx y solutions.tsx, necesitaríamos las siguientes declaraciones de importación:

import Hero from "../components/Hero";
import Footer from "../components/Footer";

Refactorizando Importaciones Relativas

Ahora digamos que queremos refactorizar. Ahora tenemos múltiples “soluciones” y queremos tener cada una en su propia página, y tenerlas bajo un directorio solutions. La estructura de archivos ahora se ve así:

.
└── src/
    ├── components/
    │   ├── Hero.tsx
    │   └── Footer.tsx
    └── pages/
        ├── index.tsx
        └── solutions/
            ├── solution.tsx
            └── solution2.tsx

Ahora tenemos que actualizar las rutas de importación de solution.tsx:

import Hero from "../../components/Hero";
import Footer from "../../components/Footer";

Puedes ver cómo esto hace que la refactorización sea más una tarea. Tenemos que actualizar las rutas de importación en cada archivo que importa estos componentes. Esto es una gran pérdida de tiempo y puede llevar a errores si olvidas actualizar las rutas de importación.

Versión con Importaciones con Alias

Alternativamente, si desde el principio estuviéramos usando alias, no tendríamos que actualizar ningún archivo que use los componentes. Esto es mucho mejor para la mantenibilidad:

import Hero from "@components/Hero";
import Footer from "@components/Footer";

Rutas Adicionales

Esto se puede extender a cualquier número de alias de rutas. Algunos otros potenciales que podrías usar:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@config/*": ["src/data/*"],
      "@js/*": ["src/js/*"],
      "@layouts/*": ["src/layouts/*"],
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}