Type Guards: in & instanceof

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 69 von 73.

Bei der Arbeit mit Union-Typen musst du häufig feststellen, mit welchem spezifischen Typ du es zu tun hast, bevor du sicher auf typspezifische Eigenschaften oder Methoden zugreifen kannst. Typwächter bieten eine sichere Möglichkeit, Typen zur Laufzeit einzugrenzen.

Der in-Operator prüft, ob eine Eigenschaft in einem Objekt existiert. Dies ist besonders nützlich, wenn Sie eine Union von Objekttypen mit unterschiedlichen Eigenschaften haben:

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

function petSound(pet: Dog | Cat) {
  if ('breed' in pet) {
    // TypeScript weiß hier, dass pet ein Dog ist
    console.log(`${pet.name} is a ${pet.breed}`);
  } else {
    // TypeScript weiß hier, dass pet eine Cat ist
    pet.meow();
  }
}

Der instanceof-Operator prüft, ob ein Objekt von einer bestimmten Konstruktorfunktion oder Klasse erstellt wurde. Obwohl wir Klassen noch nicht behandelt haben, ist dieser Operator nützlich, wenn man mit integrierten JavaScript-Objekten oder benutzerdefinierten Klassen arbeitet:

function processValue(value: string | Date) {
  if (value instanceof Date) {
    // TypeScript weiß, dass value ein Date ist
    console.log(value.getFullYear());
  } else {
    // TypeScript weiß, dass value ein string ist
    console.log(value.toUpperCase());
  }
}

Beide Operatoren helfen dem TypeScript-Compiler zu verstehen, mit welchem Typ Sie arbeiten, und ermöglichen so den sicheren Zugriff auf typspezifische Eigenschaften und Methoden.

Aufgabe

Einfach

Erstelle eine Funktion, die verschiedene Medienelemente verarbeitet und den in-Operator verwendet, um zwischen ihnen zu unterscheiden.

Erstelle zwei Typ-Aliase:

Movie mit den Eigenschaften title (Zeichenkette) und director (Zeichenkette)
Song mit den Eigenschaften title (Zeichenkette) und artist (Zeichenkette)

Erstelle eine Funktion namens getMediaInfo, die:

einen Parameter media vom Typ Movie | Song entgegennimmt
den in-Operator verwendet, um zu prüfen, ob die Eigenschaft director existiert
"Movie: [title] directed by [director]" zurückgibt, wenn es sich um einen Film handelt
"Song: [title] by [artist]" zurückgibt, wenn es sich um ein Lied handelt
einen expliziten Rückgabetyp string besitzt

Erstelle eine zweite Funktion namens processValue, die:

einen Parameter value vom Typ string | Date entgegennimmt
den instanceof-Operator verwendet, um zu prüfen, ob value ein Date ist
das Jahr als Zahl zurückgibt, wenn es sich um ein Datum handelt (unter Verwendung von getFullYear())
die Länge der Zeichenkette als Zahl zurückgibt, wenn es sich um eine Zeichenkette handelt
einen expliziten Rückgabetyp number besitzt

Erstelle Testdaten:

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"

Gib die folgenden Ausgaben aus:

Rufe getMediaInfo mit movie1 auf
Rufe getMediaInfo mit song1 auf
Rufe getMediaInfo mit movie2 auf
Rufe getMediaInfo mit song2 auf
Rufe processValue mit testDate auf
Rufe processValue mit testString auf

Probier es selbst

// TODO: Schreiben Sie hier Ihren Code

// Erstellen Sie Typ-Aliase für Movie und Song


// Erstellen Sie die Funktion getMediaInfo


// Erstellen Sie die Funktion processValue


// Testdaten erstellen
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";

// Die Ausgaben ausgeben
console.log(getMediaInfo(movie1));
console.log(getMediaInfo(song1));
console.log(getMediaInfo(movie2));
console.log(getMediaInfo(song2));
console.log(processValue(testDate));
console.log(processValue(testString));