Cet article s'adresse principalement à ceux qui ne sont pas nouveaux dans le monde de TypeScript. Si vous avez une certaine expérience avec ce langage mais que vous n'avez pas encore rencontré les Unions Discriminées, ou si vous souhaitez approfondir vos connaissances dans ce domaine, vous êtes au bon endroit. Je suppose que vous êtes déjà familier avec les bases de TypeScript, telles que les types et les interfaces, ce qui vous aidera à comprendre et à apprécier pleinement la puissance des Unions Discriminées en TypeScript.
Si vous commencez tout juste votre parcours avec TypeScript, je vous recommande de vous familiariser d'abord avec les bases du langage, puis de revenir à cet article. Cela vous fournira une base solide, vous permettant de saisir pleinement les sujets abordés dans ce texte.
Qu'est-ce que les Unions Discriminées en TypeScript
Avant de passer à la pratique, découvrons d'abord ce que sont les Unions Discriminées en TypeScript.
Les Unions Discriminées, également connues sous le nom de "tagged unions" ou "types de données algébriques", sont une fonctionnalité de TypeScript qui permet de modéliser des objets pouvant prendre plusieurs formes. Cela permet de combiner plusieurs types différents en un type commun, mais de manière contrôlée.
L'idée fondamentale derrière les Unions Discriminées est d'ajouter un champ (souvent appelé "discriminateur" ou "tag") à chacun des types combinés, qui identifie sans ambiguïté à quelle "union" appartient un objet particulier.
Si nous savons déjà ce que c'est et à quoi cela sert, nous pouvons passer à des exemples qui nous aideront à mieux comprendre.
Exemple #1
Supposons que vous créez un système de gestion d'événements où les événements peuvent être soit des messages, soit des alarmes :
interface MessageEvent {
type: "message"; // discriminateur
content: string;
senderId: string;
}
interface AlarmEvent {
type: "alarm"; // discriminateur
severity: "low" | "medium" | "high";
timestamp: Date;
}
type Event = MessageEvent | AlarmEvent; // Union Discriminée
Grâce aux Unions Discriminées, nous pouvons maintenant gérer facilement et en toute sécurité ces événements dans une fonction :
const handleEvent = (e: Event) = {
if (e.type === "message") {
console.log(`Message from user ID: ${e.senderId} - ${e.content}`);
} else if (e.type === "alarm") {
console.log(`${e.severity} severity alarm recorded at ${e.timestamp}`);
}
}>
Lorsque nous comparons e.type à une chaîne spécifique, TypeScript sait de quel type spécifique nous traitons dans un bloc de code donné. Grâce à cela, nous pouvons utiliser en toute sécurité les propriétés spécifiques à un type d'événement donné.
Exemple #2
Dans l'exemple suivant, nous allons explorer comment structurer les données utilisateur pour deux types d'utilisateurs, les administrateurs et les utilisateurs réguliers, en utilisant le modèle de propriétés. Les deux types d'utilisateurs partagent des propriétés communes, telles que id, username et email, mais ont des propriétés spécifiques à leur rôle. Entrons dans les détails :
// Propriétés communes à tous les utilisateurs
interface BaseUser {
id: number;
username: string;
email: string;
}
interface AdminProps extends BaseUser {
accessLevel: number;
}
interface UserProps extends BaseUser {
subscriptionType: "free" | "premium";
}
// Propriétés spécifiques pour les administrateurs
interface Admin {
type: "admin"; // discriminateur
props: AdminProps;
}
// Propriétés spécifiques pour un utilisateur régulier
interface User {
type: "user"; // discriminateur
props: UserProps;
}
// Type combinant les deux catégories d'utilisateur
type UserType = Admin | User;
// Objets de données utilisateur échantillon
const admin1: UserType = {
type: "admin",
props: {
id: 1,
username: "adminJohn",
email: "john.admin@example.com",
accessLevel: 5
}
};
const user1: UserType = {
type: "user",
props: {
id: 2,
username: "userAnna",
email: "anna.user@example.com",
subscriptionType: "premium"
}
};
// Maintenant, vous pouvez travailler avec ces objets en utilisant les données assignées.
console.log(admin1.props.accessLevel); // "5"
console.log(user1.props.subscriptionType); // "premium"
Conclusion
Les Unions Discriminées sont un outil puissant dans TypeScript, permettant de modéliser et de manipuler des données de manière précise et en toute sécurité. Grâce à elles, nous pouvons créer des structures de données complexes qui combinent plusieurs types différents en un tout cohérent, tout en maintenant la certitude du type exact avec lequel nous traitons à tout moment.
J'espère que cet article vous a aidé à mieux comprendre les Unions Discriminées et comment elles peuvent être utilisées efficacement dans vos projets. Si vous avez des questions ou des doutes, je vous encourage à continuer à explorer ce sujet et à expérimenter avec votre propre code.
Merci de m'avoir lu, et je vous souhaite du succès dans votre programmation TypeScript future !
