Menu
CoddyTech

Arbeiten mit Union-Typen

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

Wenn Sie mit Union-Typen arbeiten, erzwingt TypeScript eine wichtige Sicherheitsregel: Sie können nur auf Eigenschaften und Methoden zugreifen, die in allen Typen der Union vorhanden sind. Dies verhindert Laufzeitfehler, bedeutet aber auch, dass Sie spezielle Techniken benötigen, um auf typspezifische Funktionen zuzugreifen.

Betrachten Sie eine Funktion, die entweder einen String oder ein Array von Strings akzeptiert. Beide Typen verfügen über eine length-Eigenschaft, sodass Sie sicher darauf zugreifen können:

function getLength(input: string | string[]): number {
  return input.length; // Sicher - beide Typen haben eine Länge
}

Wenn du jedoch versuchst, eine Methode zu verwenden, die nur für einen Typ existiert, zeigt TypeScript einen Fehler an. Um typspezifisch auf Member zuzugreifen, benötigst du einen Typwächter – eine Laufzeitprüfung, die den Typ eingrenzt:

function processInput(input: string | string[]): void {
  if (typeof input === "string") {
    // TypeScript weiß, dass input hier ein string ist
    console.log(input.toUpperCase());
  } else {
    // TypeScript weiß, dass input hier string[] ist
    console.log(input.join(", "));
  }
}

Der typeof-Operator ist einer der häufigsten Typwächter. Nach der Prüfung grenzt TypeScript den Typ innerhalb jedes Zweigs automatisch ein und gibt dir vollen Zugriff auf typspezifische Eigenschaften und Methoden, während die vollständige Typsicherheit erhalten bleibt.

challenge icon

Aufgabe

Einfach

Erstelle eine Funktion namens processData, die einen Parameter namens input vom Typ string | string[] akzeptiert und eine number zurückgibt. Die Funktion soll eine Typprüfung verwenden, um den Eingabetyp zu bestimmen, und sich wie folgt verhalten:

  • Wenn die Eingabe ein string ist, gib ihre Länge zurück
  • Wenn die Eingabe ein string[] ist, gib die Gesamtzahl der Zeichen in allen Strings des Arrays zurück

Erstelle eine weitere Funktion namens formatMessage, die einen Parameter namens content vom Typ number | boolean akzeptiert und einen string zurückgibt. Die Funktion soll eine Typprüfung verwenden, um den Eingabetyp zu bestimmen, und sich wie folgt verhalten:

  • Wenn die Eingabe eine number ist, gib "Value: [number]" zurück
  • Wenn die Eingabe ein boolean ist, gib "Status: [boolean]" zurück

Die folgenden Eingaben werden bereitgestellt:

  • Erste Eingabe: ein String, der entweder ein einzelnes Wort oder ein JSON-Array aus Strings wie ["apple", "banana", "cherry"] darstellt
  • Zweite Eingabe: ein String, der entweder eine Zahl oder einen booleschen Wert ("true" oder "false") darstellt

Verarbeite die Eingaben wie folgt:

  • Für die erste Eingabe: Wenn sie mit "[" beginnt, parse sie als JSON-Array aus Strings; andernfalls behandle sie als einzelnen String
  • Für die zweite Eingabe: Wenn sie "true" oder "false" ist, wandle sie in einen booleschen Wert um; andernfalls wandle sie in eine Zahl um

Rufe processData mit der verarbeiteten ersten Eingabe auf und gib das Ergebnis aus. Rufe anschließend formatMessage mit der verarbeiteten zweiten Eingabe auf und gib das Ergebnis aus.

Probier es selbst

import * as fs from "fs";

// Eingaben lesen
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const firstInput = inputs[0];
const secondInput = inputs[1];

// TODO: Schreiben Sie Ihren Code hier
// Erstellen Sie die Funktion processData mit Type Guard
// Erstellen Sie die Funktion formatMessage mit Type Guard
// Verarbeiten Sie die Eingaben gemäß den Anforderungen
// Rufen Sie die Funktionen auf und geben Sie die Ergebnisse aus
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Einführung in TypeScript

Übe selbstständig: TypeScript-Playground