Utiliser les alias @ dans vos imports

‍

Dans les grands projets TypeScript, la gestion des chemins d'importation peut rapidement devenir complexe et difficile à lire. Les chemins relatifs notamment peuvent mener à des imports trop longs et difficiles à maintenir. Cet article vous montrera comment simplifier ces imports en utilisant des alias comme @/ ainsi que l'organisation de vos fichiers en utilisant des index.

Problèmes Courants avec les Chemins Relatifs Longs

Considérez une structure de projet comme celle-ci :

src/
  components/
    Header/
      Header.tsx
  pages/
    Home/
      Home.tsx
  utils/
    helpers/
      format.ts

Voici ce à quoi peuvent ressembler les imports dans ces fichiers :

// Home.tsx
import Header from '../../../components/Header';
import { format } from '../../../utils/helpers/format';

// Header.tsx
import { format } from '../../../utils/helpers/format';

Lorsque la structure de votre projet devient plus profonde, la situation empire et les chemins d'importation deviennent rapidement illisibles et sujets aux erreurs.

Simplification des Chemins avec @/

Pour résoudre ce problème, vous pouvez utiliser des alias dans votre projet TypeScript. Une convention courante est d'utiliser @/ pour représenter le répertoire src/.

1. Configuration de TypeScript

Pour configurer votre projet avec des alias, ajoutez ou modifiez les options de chemin dans votre tsconfig.json :

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2. Mise à jour des Imports

Après avoir configuré les alias, vous pouvez simplifier vos chemins d'importation :

// Home.tsx
import Header from '@/components/Header';
import { format } from '@/utils/helpers/format';

// Header.tsx
import { format } from '@/utils/helpers/format';

Utilisation des Index pour Réduire les Imports

Une autre technique pour simplifier les imports est l'utilisation d'index. Un fichier index.ts dans un répertoire peut centraliser les exports des autres fichiers de ce répertoire.

1. Création des Fichiers d'Index

Supposons que vous avez les fichiers suivants dans src/components/ et src/utils/ :

// src/components/index.ts
export { default as Header } from './Header/Header';

// src/utils/index.ts
export * from './helpers/format';

2. Mise à Jour des Chemins d'Importation

Avec les fichiers d'index, les imports se simplifient encore plus :

// Home.tsx
import { Header } from '@/components'; // Par l'intermédiaire de index.ts
import { format } from '@/utils'; // Par l'intermédiaire de index.ts

// Header.tsx
import { format } from '@/utils';

Utilisation de l'Extension VSCode Indexify

Oui ça peut être un peut casse-pied à la longue de devoir mettre à jour les fichiers d'index chaque fois que l'on créé un nouveau fichier. 

Pour automatiser cela, vous pouvez utiliser l'extension Indexify pour Visual Studio Code. Cette extension génère automatiquement des fichiers index.ts dans les répertoires de votre choix et les maintient à jour lorsque vous ajoutez ou supprimez des fichiers.

Une fois l'extension installée, vous pouvez configurer les répertoires à indexer dans vos paramètres utilisateur ou de projet, ce qui vous épargne du temps et réduit les erreurs potentielles dans vos fichiers d'index.

Conclusion

L'utilisation des alias @/, des fichiers d'index, et de l'extension VSCode Indexify peut grandement améliorer la lisibilité et la maintenabilité de vos imports dans un projet TypeScript. En suivant ces techniques, vous pouvez transformer des chemins d'importation longs et complexes en chemins courts et simplifiés, ce qui rend votre code plus propre et plus facile à gérer.

‍