Les unions balisées TypeScript sont OP

Vous avez déjà eu du mal à gérer plusieurs formes d'objets dans TypeScript et vous souhaitiez une solution plus sûre ?

Si c'est le cas, vous n'êtes pas seul. De nombreux développeurs ignorent tout le potentiel qu'offrent les syndicats étiquetés (également appelés syndicats discriminés) dans TypeScript. Cette fonctionnalité puissante peut améliorer la sécurité, la lisibilité et la maintenabilité de votre code. Dans cet article, nous approfondirons les unions étiquetées et explorerons comment elles peuvent améliorer vos compétences TypeScript.

?️ Que sont les syndicats tagués ?

Les unions balisées vous permettent de créer des types qui représentent l'une des nombreuses formes possibles, chacune avec une propriété distinctive connue sous le nom de « balise » ou de « discriminateur ». Cela permet à TypeScript d'affiner les types dans les vérifications conditionnelles, garantissant ainsi que votre code gère explicitement tous les cas possibles.

? Pourquoi devriez-vous vous en soucier ?

Sécurité de type améliorée

Les unions balisées aident à détecter les erreurs au moment de la compilation en garantissant que tous les cas possibles sont traités. Cela réduit les erreurs d'exécution et rend votre code plus robuste.

Code clair et maintenable

En définissant explicitement la forme de chaque boîtier, votre code devient plus lisible et plus facile à maintenir. Les futurs développeurs (ou même les futurs vous) vous remercieront !

Vérification de l'exhaustivité

TypeScript peut vous avertir si vous oubliez de gérer un cas possible, garantissant que votre code prend en compte tous les scénarios.

? Syndicats tagués par exemple

Considérez un scénario dans lequel vous avez différentes formes et souhaitez calculer leurs aires :

// Define interfaces with a discriminant property 'kind'
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

// Create a union type of all shapes
type Shape = Circle | Rectangle | Triangle;

// Function to calculate the area based on shape kind
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;

    case 'rectangle':
      return shape.width * shape.height;

    case 'triangle':
      return (shape.base * shape.height) / 2;

    default:
      // The 'never' type ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Que se passe-t-il ici ?

• Propriété Discriminante (kind) : Chaque interface inclut une propriété kind avec un type littéral. Cette propriété fait office de balise pour l'union.
• Type d'union (Forme) : combine toutes les interfaces de forme en un seul type.
• Type Narrowing : à l'intérieur de l'instruction switch, TypeScript sait exactement à quelle forme il traite en fonction de la propriété kind.
• Vérification de l'exhaustivité : le cas par défaut avec un type jamais garantit que si une nouvelle forme est ajoutée mais non gérée, TypeScript produira une erreur de compilation.

?️ Exemple : Gestion de l'État

Les unions balisées sont incroyablement utiles dans les scénarios de gestion d'état, tels que la représentation des différents états d'une opération asynchrone (par exemple, la récupération de données).

interface LoadingState {
  status: 'loading';
}

interface SuccessState {
  status: 'success';
  data: string;
}

interface ErrorState {
  status: 'error';
  error: string;
}

type AppState = LoadingState | SuccessState | ErrorState;

function renderApp(state: AppState) {
  switch (state.status) {
    case 'loading':
      return 'Loading...';
    case 'success':
      return `Data: ${state.data}`;
    case 'error':
      return `Error: ${state.error}`;
    // default case can be omitted because typescript is making sure all cases are covered!
  }
}

? Pourquoi est-ce bon ?

• Représentation claire des états : Chaque interface représente un état distinct de l'application, ce qui la rend facile à comprendre et à gérer.

• Sécurité des types avec accès aux données : lorsque l'état est « succès », TypeScript sait que cet état a une propriété de données. De même, lorsque l'état est « erreur », il connaît la propriété d'erreur. Cela vous évite d'accéder accidentellement à des propriétés qui n'existent pas dans un état donné.

• Vérification de l'exhaustivité : Si vous ajoutez un nouvel état (par exemple, EmptyState avec le statut : 'vide'), TypeScript vous alertera pour gérer ce nouveau cas dans la fonction renderApp.

• Maintenabilité améliorée : à mesure que votre application se développe, la gestion des différents états devient plus gérable. Les modifications apportées à une partie du code entraînent des mises à jour nécessaires ailleurs, réduisant ainsi les bogues.

? Conseils d'utilisation des unions étiquetées

Discriminateur cohérent : utilisez le même nom de propriété (par exemple, type, genre ou statut) pour tous les types.
Types littéraux : assurez-vous que la propriété discriminante utilise des types littéraux ("e-mail", "sms", etc.) pour un rétrécissement précis des types.
Évitez les énumérations de chaînes : préférez les types littéraux de chaîne aux énumérations pour les discriminateurs afin que le rétrécissement des types reste simple.

? Conclusion

Les unions balisées sont une fonctionnalité puissante de TypeScript qui peut vous aider à écrire du code plus sûr et plus maintenable. En gérant explicitement chaque type possible, vous réduisez le risque d'erreurs inattendues et rendez votre code plus facile à comprendre.

Essayez les unions étiquetées dans votre projet TypeScript actuel ou prochain et découvrez les avantages par vous-même !

? Lectures complémentaires

• Manuel TypeScript : Unions et types d'intersection
• Que sont les syndicats discriminés TypeScript ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!