Com Utilitzar Àlies de Rutes de TSConfig per Millorar el teu Codi

Els àlies de rutes de TSConfig són una eina poderosa que pot ajudar-te a millorar la llegibilitat, mantenibilitat i prevenció d’errors del teu codi TypeScript. Això permet un codi net més fàcil de llegir, i ens permet moure arxius sense haver d’actualitzar les rutes d’importació a cada arxiu.

Això és un gran estalvi de temps.

Què Són els Àlies de Rutes?

L’objectiu és substituir les següents declaracions d’importació:

// ruta d'importació relativa
import MyComponent from "../../../components/MyComponent";

amb aquestes declaracions d’importació:

// ruta d'importació amb àlies
import MyComponent from "@components/MyComponent";

Podem fer això amb un arxiu tsconfig.json o jsconfig.json. Utilitzarem TypeScript en aquesta publicació.

Com Configurar Àlies de Rutes

Afegint Àlies de Rutes al teu Arxiu TSConfig

Necessitem actualitzar el nostre arxiu tsconfig.json per habilitar els àlies. Afegirem les propietats paths i baseUrl a l’objecte compilerOptions. Cada ruta és relativa a baseUrl.

Això li dirà a TypeScript que substitueixi l’àlies amb la ruta real en compilar el codi.

{
  "compilerOptions": {
    "baseUrl": ".", // arrel dels teus "paths" de sota. Requerit si "paths" està definit
    "paths": {
      "@components/*": ["src/components/*"] // ens permet utilitzar @components/MyComponent
    }
  }
}

Utilitzant Àlies de Rutes al teu Codi

Ara a tots els teus arxius font, pots importar components així:

// Sense àlies de rutes
import Hero from "../../../components/Hero";
import Footer from "../../../components/Footer";

// Amb àlies de rutes
import Hero from "@components/Hero";
import Footer from "@components/Footer";

Per Què Hauria de Fer Això?

Diguem que tenim la següent estructura d’arxius:

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

Importacions Relatives Molestes

Si volem importar Hero.tsx i Footer.tsx a index.tsx i solutions.tsx, necessitaríem les següents declaracions d’importació:

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

Refactoritzant Importacions Relatives

Ara diguem que volem refactoritzar. Ara tenim múltiples “solucions” i volem tenir cada una a la seva pròpia pàgina, i tenir-les sota un directori solutions. L’estructura d’arxius ara es veu així:

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

Ara hem d’actualitzar les rutes d’importació de solution.tsx:

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

Pots veure com això fa que la refactorització sigui més una tasca. Hem d’actualitzar les rutes d’importació a cada arxiu que importa aquests components. Això és una gran pèrdua de temps i pot portar a errors si oblides actualitzar les rutes d’importació.

Versió amb Importacions amb Àlies

Alternativament, si des del principi estiguéssim utilitzant àlies, no hauríem d’actualitzar cap arxiu que utilitzi els components. Això és molt millor per a la mantenibilitat:

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

Rutes Addicionals

Això es pot estendre a qualsevol nombre d’àlies de rutes. Alguns altres potencials que podries utilitzar:

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