TypeScript - Types Unions : Une Introduction Amicale pour les Débutants

Salut là, future superstar du codage ! ? Es-tu prêt à plonger dans le merveilleux monde de TypeScript et à découvrir l'une de ses fonctionnalités les plus puissantes ? Aujourd'hui, nous allons explorer les Types Unions, un concept qui peut sembler intimidant au départ, mais je te promets que tu le trouveras super utile et même amusant à la fin de ce tutoriel !

En tant que ton prof de informatique du coin, j'ai vu des dizaines d'élèves s'illuminer lorsque ils saisissent ce concept. Alors, parentrons-nous dans cette aventure ensemble, d'accord ?

Qu'est-ce qu'un Type Union ?

Avant de rentrer dans les détails, commencerons par une simple analogie. Imagine que tu as une boîte magique qui peut contenir soit une voiture jouet soit un animal en peluche, mais pas les deux en même temps. C'est un peu ce qu'est un Type Union en TypeScript - c'est un moyen de dire à notre code qu'une variable peut être de plusieurs types.

Maintenant, mettons les mains dans le cambouis avec un peu de code !

Syntaxe : Union Littérale

La syntaxe de base pour un Type Union utilise le symbole du pipe (|) pour séparer les différents types. C'est comme dire à TypeScript : "Eh, ça peut être ça OU ça !"

let mon Favori: string | number;

monFavori = "TypeScript"; // C'est valide
console.log(monFavori); // Output : TypeScript

monFavori = 42; // C'est aussi valide
console.log(monFavori); // Output : 42

// monFavori = true; // Cela provoquerait une erreur

Dans cet exemple, monFavori peut être soit une chaîne de caractères soit un nombre. C'est comme notre boîte magique qui peut contenir soit un mot soit un nombre, mais pas autre chose. Si nous essayions de mettre un booléen (comme true) dedans, TypeScript brandirait sa baguette magique et nous montrerait une erreur.

Variable de Type Union

Étendre notre exemple précédent et voyons comment les Types Union peuvent rendre notre code plus flexible :

type Animal = "chat" | "chien" | "poisson";
let monAnimal: Animal;

monAnimal = "chat"; // C'est valide
console.log(`J'ai un ${monAnimal}`); // Output : J'ai un chat

monAnimal = "chien"; // C'est aussi valide
console.log(`J'ai un ${monAnimal}`); // Output : J'ai un chien

// monAnimal = "éléphant"; // Cela provoquerait une erreur

Ici, nous avons créé un type personnalisé appelé Animal qui ne peut être qu'un des trois chaînes spécifiques. C'est comme avoir une animalerie qui ne vend que des chats, des chiens et des poissons. Si vous essayez d'acheter un éléphant, désolé, c'est impossible !

Type Union et Paramètres de Fonction

Les Types Union brillent vraiment lorsque nous les utilisons avec des fonctions. Ils permettent à nos fonctions d'être plus polyvalentes sans perdre la sécurité des types. Regardons un exemple :

function imprimerId(id: number | string) {
console.log(`Votre ID est : ${id}`);
}

imprimerId(101); // Output : Votre ID est : 101
imprimerId("202"); // Output : Votre ID est : 202

// imprimerId(true); // Cela provoquerait une erreur

Dans cette fonction, imprimerId peut accepter soit un nombre soit une chaîne de caractères comme argument. C'est comme un lecteur d'ID universel qui peut traiter à la fois des IDs numériques et textuels. Mais essayez de glisser votre carte d'ID booléenne, et il refusera poliment !

Type Union et Tableaux

Maintenant, levons le niveau et voyons comment les Types Union fonctionnent avec les tableaux. Préparez-vous pour un peu de magie de tableau !

let tableauMixte: (number | string)[] = [1, "deux", 3, "quatre", 5];

console.log(tableauMixte); // Output : [1, "deux", 3, "quatre", 5]

tableauMixte.push(6); // C'est valide
tableauMixte.push("sept"); // C'est aussi valide

// tableauMixte.push(true); // Cela provoquerait une erreur

console.log(tableauMixte); // Output : [1, "deux", 3, "quatre", 5, 6, "sept"]

Ici, nous avons créé un tableau qui peut contenir à la fois des nombres et des chaînes de caractères. C'est comme une playlist qui peut inclure à la fois des numéros de piste et des titres de chansons. Mais essayez de glisser un booléen dedans, et TypeScript vous attrapera sur le fait !

Cas d'Utilisation Pratiques

Maintenant que nous avons couvert les bases, regardons quelques scénarios du monde réel où les Types Union peuvent sauver la mise :

1. Réponses API : Lorsque vous travaillez avec des API, parfois les données que vous recevez peuvent être de différents types. Les Types Union vous aident à gérer ces variations en douceur.

type ReponseApi = {
statut: "succès" | "erreur";
donnees: string | number | null;
};

function traiterReponse(reponse: ReponseApi) {
if (reponse.statut === "succès") {
console.log(`Succès ! Données : ${reponse.donnees}`);
} else {
console.log("Une erreur s'est produite");
}
}

traiterReponse({ statut: "succès", donnees: "Profil utilisateur chargé" });
traiterReponse({ statut: "erreur", donnees: null });

2. Options de Configuration : Lors de la création de fonctions configurables, les Types Union vous permettent de fournir un ensemble d'options valides.

type Couleur = "rouge" | "vert" | "bleu";
type Taille = "petit" | "moyen" | "grand";

function creerBouton(couleur: Couleur, taille: Taille) {
console.log(`Création d'un bouton ${couleur} de taille ${taille}`);
}

creerBouton("rouge", "moyen"); // Valide
// creerBouton("jaune", "extra-grand"); // Cela provoquerait une erreur

Méthodes Communes pour les Types Union

Voici un tableau de quelques méthodes courantes que vous pouvez utiliser avec les Types Union :

Méthode	Description	Exemple
typeof	Vérifie le type d'une valeur	typeof x === "string"
instanceof	Vérifie si un objet est une instance d'une classe spécifique	x instanceof Date
in	Vérifie si une propriété existe dans un objet	"nom" in x
Array.isArray()	Vérifie si une valeur est un tableau	Array.isArray(x)

Conclusion

Whaou ! Nous avons couvert beaucoup de terrain aujourd'hui, n'est-ce pas ? Les Types Union peuvent sembler un peu compliqués au début, mais ils sont des outils incroyablement puissants dans votre boîte à outils TypeScript. Ils vous permettent d'écrire un code plus flexible et plus robuste, attrapant d'éventuelles erreurs avant qu'elles ne se produisent.

N'oubliez pas, coder, c'est comme apprendre une nouvelle langue - cela prend de la pratique et de la patience. Ne soyez pas découragé si vous ne comprenez pas tout de suite. Continuez à expérimenter, continuez à coder, et avant que vous ne vous en rendiez compte, vous utiliserez les Types Union comme un pro !

En conclusion, je suis rappelé d'un élève qui m'a dit un jour : "Les Types Union sont comme un couteau suisse pour mon code !" Et vous savez quoi ? Il avait complètement raison. Alors, va jeune codeur, et puissent tes Types Union toujours être à ton avantage ! ??

Credits: Image by storyset