Lorsque vous travaillez avec TypeScript, vous devrez peut-être définir un type d'union et un tableau contenant toutes les valeurs possibles de ce type. Une approche courante consiste à écrire quelque chose comme ceci :

type Taste = 'しょうゆ' | 'みそ' | 'とんこつ';
const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

À première vue, cela semble bien. Cependant, il y a ici un problème caché : chaque fois que vous souhaitez modifier ou ajouter une option, vous devez mettre à jour à la fois le type d'union Taste et le tableau des goûts. Cette duplication des efforts peut conduire à des erreurs et rendre la maintenance du code plus fastidieuse.

Heureusement, il existe un moyen de simplifier cela en réduisant la redondance. En utilisant l'assertion as const et typeof dans TypeScript, vous pouvez consolider la définition du type d'union et du tableau en un seul endroit. Voici comment refactoriser le code ci-dessus :

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;
type Taste = (typeof tastes)[number];

Cette approche présente plusieurs avantages :

1. Source unique de vérité :
   
   Vous ne définissez la liste de valeurs qu'une seule fois, dans le tableau des goûts. Le type Taste est automatiquement dérivé de ce tableau, donc si jamais vous avez besoin de mettre à jour la liste, vous n'avez qu'à le faire à un seul endroit.

2. Type de sécurité :
   
   En utilisant as const, TypeScript traite le tableau de goûts comme un tuple avec des types littéraux au lieu d'un simple tableau de chaînes. Cela garantit que le type de goût reste précis et aligné sur les valeurs des goûts.

3. Meilleure maintenance :
   
   Étant donné que le type Taste est généré à partir du tableau, il n'y a aucun risque de non-concordance entre le type et les valeurs réelles. Cela réduit le risque de bogues et rend le code plus facile à maintenir.

Exemple de cas d'utilisation

Désormais, chaque fois que vous utilisez le type Taste dans votre code, il est garanti qu'il correspond aux valeurs du tableau Taste :

function describeTaste(taste: Taste): string {
  switch (taste) {
    case 'しょうゆ':
      return 'Savory soy sauce flavor.';
    case 'みそ':
      return 'Rich miso flavor.';
    case 'とんこつ':
      return 'Creamy pork broth flavor.';
    default:
      return 'Unknown taste';
  }
}

const allTastes: Taste[] = tastes; // Safe, because they match the type!

Ce modèle améliore non seulement la lisibilité de votre code, mais garantit également qu'il est moins sujet aux erreurs, en particulier lorsqu'il s'agit de plusieurs valeurs qui doivent être synchronisées.

En adoptant cette stratégie, vous pouvez rendre votre code TypeScript plus maintenable et évolutif. Ceci est particulièrement utile lorsque vous traitez de grands ensembles de valeurs ou lorsque votre base de code s'agrandit avec le temps.