TypeScript - Gardes de type : Un guide pour débutants

Salut là, future superstar du codage ! ? Je suis ravi de devenir ton guide sur ce voyage passionnant à la découverte du monde de TypeScript et des gardes de type. En tant que quelqu'un qui enseigne l'informatique depuis de nombreuses années, je peux te dire que comprendre les gardes de type, c'est comme avoir un superpouvoir dans l'univers TypeScript. Alors, mettons-nous à l'eau et déverrouillons cette puissance ensemble !

Qu'est-ce que les gardes de type ?

Avant de plonger dans les détails, comprenons ce que sont les gardes de type. Imagine que tu es un gardien de sécurité à une fête chic. Ton travail est de vérifier l'invitation de chaque invité et de t'assurer qu'ils sont autorisés dans les bonnes zones. Les gardes de type dans TypeScript font un travail similaire - elles aident le compilateur à vérifier et à affiner le type d'une variable dans un certain bloc de code.

Maintenant, explorons les trois principaux types de gardes que nous allons apprendre aujourd'hui :

Garde de type	Description
typeof	Vérifie le type d'une variable
in	Vérifie si une propriété existe dans un objet
instanceof	Vérifie si un objet est une instance d'une classe

La garde de type 'typeof' en TypeScript

La garde de type 'typeof' est comme demander, "De quel type de chose es-tu ?" Elle est utilisée pour vérifier le type d'une variable. Jetons un coup d'œil à un exemple :

function printAll(strs: string | string[] | null) {
if (typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
} else {
// ne rien faire
}
}

Dans cet exemple, nous utilisons typeof pour vérifier si strs est un objet (ce qui inclut les tableaux) ou une chaîne de caractères. Si c'est un objet, nous le parcourons. Si c'est une chaîne de caractères, nous l'affichons directement.

Voici une manière amusante de le retenir : imagine que tu es dans une animalerie, et que tu veux savoir si un animal est un chien ou un chat. Tu pourrais demander, "Quel type d'animal es-tu ?" C'est exactement ce que typeof fait dans TypeScript !

La garde de type 'in' en TypeScript

La garde de type 'in' est comme demander, "As-tu cette fonctionnalité ?" Elle vérifie si une propriété existe dans un objet. Jetons un coup d'œil à un exemple :

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
if ("swim" in animal) {
animal.swim();
} else {
animal.fly();
}
}

Dans ce code, nous vérifions si l'animal a une propriété swim. Si oui, nous supposons qu'il s'agit d'un Fish et appelons la méthode swim. Sinon, nous supposons qu'il s'agit d'un Bird et appelons la méthode fly.

Pense à ceci de cette manière : si tu essaies de déterminer si ton nouveau animal de compagnie est un poisson ou un oiseau, tu pourrais vérifier s'il a des nageoires. C'est ce que la garde de type 'in' fait - elle vérifie une propriété caractéristique.

La garde de type 'instanceof' en TypeScript

La garde de type 'instanceof' est comme demander, "Es-tu un membre de cette famille ?" Elle vérifie si un objet est une instance d'une classe particulière. Voici un exemple :

class Bird {
fly() {
console.log("Volant...");
}
}

class Fish {
swim() {
console.log("Nageant...");
}
}

function move(pet: Bird | Fish) {
if (pet instanceof Bird) {
pet.fly();
} else {
pet.swim();
}
}

let myBird = new Bird();
move(myBird); // Output: Volant...

Dans cet exemple, nous vérifions si pet est une instance de la classe Bird. Si oui, nous appelons la méthode fly. Sinon, nous supposons qu'il s'agit d'un Fish et appelons la méthode swim.

Imagine que tu es à une réunion de famille, et que tu essaies de déterminer si quelqu'un fait partie de la famille Johnson. Tu pourrais demander, "Es-tu un Johnson ?" C'est exactement ce que instanceof fait dans TypeScript !

Mettre tout cela ensemble

Maintenant que nous avons appris ces trois gardes de type, voyons comment nous pourrions les utiliser toutes ensemble :

class Car {
drive() { console.log("Vroom !"); }
}

class Bicycle {
ride() { console.log("Pédaler !"); }
}

type Vehicle = Car | Bicycle | string;

function useVehicle(vehicle: Vehicle) {
if (typeof vehicle === "string") {
console.log(`Le véhicule est : ${vehicle}`);
} else if (vehicle instanceof Car) {
vehicle.drive();
} else if ("ride" in vehicle) {
vehicle.ride();
} else {
console.log("Type de véhicule inconnu");
}
}

useVehicle("Planche à roulette");  // Output: Le véhicule est : Planche à roulette
useVehicle(new Car());     // Output: Vroom !
useVehicle(new Bicycle()); // Output: Pédaler !

Dans cet exemple, nous utilisons les trois gardes de type :

1. Nous utilisons typeof pour vérifier si le véhicule est une chaîne de caractères.
2. Nous utilisons instanceof pour vérifier s'il s'agit d'une Voiture.
3. Nous utilisons in pour vérifier s'il a une méthode ride (ce qui indiquerait qu'il s'agit d'un Vélo).

C'est comme être un super détective, utilisant toutes tes compétences pour déterminer exactement quel type de véhicule tu as affaire !

Conclusion

Et voilà, mes apprentis codeurs ! Nous avons traversé le pays des gardes de type TypeScript, explorant les gardes typeof, in, et instanceof. Ces puissants outils vous aideront à écrire un code plus sûr et plus prévisible en permettant à TypeScript de mieux comprendre vos intentions.

N'oubliez pas, utiliser des gardes de type, c'est comme avoir une conversation amicale avec votre code. Vous ne faites que lui poser des questions pour le comprendre mieux. Alors, la prochaine fois que vous codez, n'ayez pas peur - entamez une discussion avec vos variables en utilisant ces gardes de type !

Continuez à pratiquer, restez curieux, et avant de savoir, vous serez un pro des gardes de type. Jusqu'à la prochaine fois, bon codage ! ??

Credits: Image by storyset