Cómo usar alias de rutas en TSConfig para mejorar tu código

Los alias de rutas en TSConfig son una herramienta poderosa para mejorar la legibilidad, mantenibilidad y resiliencia a errores de tu código TypeScript. Permiten un código más limpio y fácil de leer, y facilitan mover archivos sin actualizar las rutas de importación en cada archivo.

Esto ahorra muchísimo tiempo.

¿Qué son los alias de rutas?

El objetivo es reemplazar las siguientes importaciones:

// relative import path
import MyComponent from "../../../components/MyComponent";

por estas importaciones:

// alias import path
import MyComponent from "@components/MyComponent";

Podemos hacerlo con un archivo tsconfig.json o jsconfig.json. En este post usaremos TypeScript.

Cómo configurar alias de rutas

Agregar alias de rutas a tu archivo TSConfig

Necesitamos actualizar el archivo tsconfig.json para habilitar alias. Agregaremos las propiedades paths y baseUrl en compilerOptions. Cada ruta es relativa a baseUrl.

Esto le indica a TypeScript que reemplace el alias por la ruta real al compilar el código.

{
  "compilerOptions": {
    "baseUrl": ".", // root of your "paths" below. Required if "paths" is defined
    "paths": {
      "@components/*": ["src/components/*"] // enables us to use @components/MyComponent
    }
  }
}

Usar alias de rutas en tu código

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

// Without path aliases
import Hero from "../../../components/Hero";
import Footer from "../../../components/Footer";

// With path aliases
import Hero from "@components/Hero";
import Footer from "@components/Footer";

¿Por qué debería hacerlo?

Supongamos 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 importaciones:

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

Refactorizando importaciones relativas

Ahora supongamos que queremos refactorizar. Tenemos múltiples “solutions” y queremos que cada una tenga su propia página dentro de un directorio solutions. La estructura 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 en solution.tsx:

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

Puedes ver cómo esto vuelve la refactorización una tarea pesada. Hay que actualizar rutas en cada archivo que importe estos componentes. Esto consume mucho tiempo y puede causar errores si olvidas actualizarlas.

Versión con alias de importación

Como alternativa, si desde el inicio usamos alias, no tendríamos que actualizar archivos que usan 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 cantidad de alias. Algunas opciones adicionales que podrías usar:

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