Gardes de types
Manipulez en toute sécurité les types unknown ou any à l’aide de gardes de types
Gardes de types est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.
Introduction aux gardes de type
Gardes de type
Bienvenue dans la prochaine leçon ! Vous allez découvrir les gardes de type, une fonctionnalité puissante de TypeScript qui vous permet de restreindre les types lors de l’exécution. Les gardes de type garantissent la sécurité des types de votre code et évitent les erreurs. Plongeons-nous dans le sujet !
Que sont les gardes de type ?
Que sont les gardes de type ?
Une garde de type est une fonction ou une construction qui détermine le type d’une variable lors de l’exécution. Elle permet à TypeScript de restreindre le type d’une variable dans un bloc de code spécifique.
Exemple :
Tâche : écrivez une fonction qui utilise une garde de type pour vérifier si une valeur est un nombre.
function isString(value: unknown): boolean {
return typeof value === "string";
}
function printLength(value: unknown): void {
if (isString(value)) {
console.log(value.length);
// TypeScript knows 'value' is a string here
} else {
console.log("Value is not a string");
}
}
printLength("Hello");
// Output: 5
printLength(42);
// Output: Value is not a string
Utiliser <code>typeof</code> pour les types primitifs
Utiliser typeof pour les types primitifs
Vous pouvez utiliser l’opérateur typeof pour vérifier le type de valeurs primitives telles que les chaînes de caractères, les nombres et les booléens.
Exemple :
Tâche : utilisez typeof pour distinguer une chaîne de caractères d’un nombre dans une fonction.
function printValue(value: string | number): void {
if (typeof value === "string") {
console.log(`String value: ${value}`);
} else {
console.log(`Number value: ${value}`);
}
}
printValue("Hello");
// Output: String value: Hello
printValue(42);
// Output: Number value: 42
Utiliser <code>instanceof</code> pour les classes
Utiliser instanceof pour les classes
L’opérateur instanceof vérifie si un objet est une instance d’une classe spécifique. Exemple :
Tâche : utilisez instanceof pour gérer différentes instances de classes dans une fonction.
class Dog {
bark(): void {
console.log("Woof!");
}
}
class Cat {
meow(): void {
console.log("Meow!");
}
}
function makeSound(animal: Dog | Cat): void {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}
let dog = new Dog();
let cat = new Cat();
makeSound(dog);
// Output: Woof!
makeSound(cat);
// Output: Meow!
Utiliser des gardes de type personnalisées
Utiliser des gardes de type personnalisées
Vous pouvez créer des fonctions de garde de type personnalisées en utilisant le type de retour value is Type. Exemple :
interface Car {
make: string;
model: string;
}
interface Bike {
brand: string;
type: string;
}
function isCar(vehicle: Car | Bike): vehicle is Car {
return (vehicle as Car).make !== undefined;
}
function printVehicle(vehicle: Car | Bike): void {
if (isCar(vehicle)) {
console.log(`Car: ${vehicle.make} ${vehicle.model}`);
} else {
console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
}
}
let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };
printVehicle(car);
// Output: Car: Toyota Corolla
printVehicle(bike);
// Output: Bike: Yamaha Sport
Unions discriminées
Unions discriminées
Les unions discriminées utilisent une propriété commune pour différencier les types. Exemple :
interface Circle {
kind: "circle";
radius: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
type Shape = Circle | Rectangle;
function calculateArea(shape: Shape): number {
if (shape.kind === "circle") {
return Math.PI * shape.radius ** 2;
} else {
return shape.width * shape.height;
}
}
let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };
console.log(calculateArea(circle));
// Output: 78.53981633974483
console.log(calculateArea(rectangle));
// Output: 200
Vérification de l’exhaustivité
Vérification de l’exhaustivité
La vérification de l’exhaustivité garantit que tous les cas possibles d’une union discriminée sont pris en charge. Exemple :
function getShapeInfo(shape: Shape): string {
switch (shape.kind) {
case "circle":
return `Circle with radius ${shape.radius}`;
case "rectangle":
return `Rectangle with dimensions ${shape.width}x${shape.height}`;
default:
// This line ensures all cases are handled
const _exhaustiveCheck: never = shape;
return _exhaustiveCheck;
}
}
Erreurs courantes
Erreurs courantes
Voici quelques erreurs courantes lors de l’utilisation des gardes de type :
- Oublier d’inclure tous les cas dans un type union.
- Ne pas utiliser de garde de type dans toutes les branches de la logique conditionnelle.
- Utiliser
asà mauvais escient pour convertir des types sans effectuer les vérifications nécessaires.
Conseil : utilisez toujours des gardes de type pour restreindre les types avant d’accéder à leurs propriétés ou méthodes spécifiques !
Bravo !
Bravo !
Félicitations ! Vous avez appris à utiliser les gardes de type dans TypeScript pour restreindre les types lors de l’exécution et garantir la sécurité des types. Les gardes de type sont essentielles pour gérer des types union complexes et créer un code robuste et sans erreur. Dans la prochaine leçon, nous étudierons les types mappés avancés. Continuons à coder !
Questions Fréquemment Posées
La leçon « Gardes de types » est-elle gratuite ?
Oui — le texte complet de « Gardes de types » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gardes de types » ?
Manipulez en toute sécurité les types unknown ou any à l’aide de gardes de types Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Gardes de types » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.