Type Guards : in & instanceof

Fait partie de la section Introduction à TypeScript du Journey JavaScript de Coddy. Leçon 69 sur 73.

Lorsque vous travaillez avec des types d'union, vous devez souvent déterminer le type spécifique auquel vous avez affaire avant de pouvoir accéder en toute sécurité aux propriétés ou méthodes spécifiques au type. Les gardes de type fournissent un moyen sûr d'affiner les types au moment de l'exécution.

L'opérateur in vérifie si une propriété existe sur un objet. Ceci est particulièrement utile lorsque vous avez une union de types d'objets avec des propriétés différentes :

type Dog = { name: string; breed: string };
type Cat = { name: string; meow: () => void };

function petSound(pet: Dog | Cat) {
  if ('breed' in pet) {
    // TypeScript sait que pet est un Dog ici
    console.log(`${pet.name} is a ${pet.breed}`);
  } else {
    // TypeScript sait que pet est un Cat ici
    pet.meow();
  }
}

L'opérateur instanceof vérifie si un objet a été créé par une fonction constructeur ou une classe spécifique. Bien que nous n'ayons pas encore abordé les classes, cet opérateur est utile lors de l'utilisation d'objets JavaScript intégrés ou de classes personnalisées :

function processValue(value: string | Date) {
  if (value instanceof Date) {
    // TypeScript sait que value est un Date
    console.log(value.getFullYear());
  } else {
    // TypeScript sait que value est une chaîne de caractères
    console.log(value.toUpperCase());
  }
}

Les deux opérateurs aident le compilateur de TypeScript à comprendre avec quel type vous travaillez, permettant un accès sécurisé aux propriétés et méthodes spécifiques au type.

Défi

Facile

Créez une fonction qui traite différents types d'éléments multimédias en utilisant l'opérateur in pour les distinguer.

Créez deux alias de type :

Movie avec les propriétés title (string) et director (string)
Song avec les propriétés title (string) et artist (string)

Créez une fonction nommée getMediaInfo qui :

Prend un paramètre media de type Movie | Song
Utilise l'opérateur in pour vérifier si la propriété director existe
Retourne "Movie: [title] directed by [director]" s'il s'agit d'un film
Retourne "Song: [title] by [artist]" s'il s'agit d'une chanson
A un type de retour explicite string

Créez une deuxième fonction nommée processValue qui :

Prend un paramètre value de type string | Date
Utilise l'opérateur instanceof pour vérifier si value est une Date
Retourne l'année sous forme de nombre s'il s'agit d'une Date (en utilisant getFullYear())
Retourne la longueur de la chaîne sous forme de nombre s'il s'agit d'une chaîne
A un type de retour explicite number

Créez des données de test :

movie1 : { title: "Inception", director: "Christopher Nolan" }
song1 : { title: "Bohemian Rhapsody", artist: "Queen" }
movie2 : { title: "The Matrix", director: "The Wachowskis" }
song2 : { title: "Imagine", artist: "John Lennon" }
testDate : new Date("2023-12-25")
testString : "TypeScript"

Affichez les sorties suivantes :

Appelez getMediaInfo avec movie1
Appelez getMediaInfo avec song1
Appelez getMediaInfo avec movie2
Appelez getMediaInfo avec song2
Appelez processValue avec testDate
Appelez processValue avec testString

Essayez vous-même

// TODO: Écrivez votre code ici

// Créer des alias de type pour Movie et Song


// Créer la fonction getMediaInfo


// Créer la fonction processValue


// Créer des données de test
const movie1 = { title: "Inception", director: "Christopher Nolan" };
const song1 = { title: "Bohemian Rhapsody", artist: "Queen" };
const movie2 = { title: "The Matrix", director: "The Wachowskis" };
const song2 = { title: "Imagine", artist: "John Lennon" };
const testDate = new Date("2023-12-25");
const testString = "TypeScript";

// Afficher les sorties
console.log(getMediaInfo(movie1));
console.log(getMediaInfo(song1));
console.log(getMediaInfo(movie2));
console.log(getMediaInfo(song2));
console.log(processValue(testDate));
console.log(processValue(testString));