Union-Typen ('|')

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

Manchmal benötigst du eine Variable, die je nach Situation verschiedene Werttypen enthalten kann. Beispielsweise könnte eine Benutzer-ID entweder als Zeichenkette wie "user123" oder als Zahl wie 42 gespeichert werden. Die Union-Typen von TypeScript lösen dieses Problem, indem sie ermöglichen, dass eine Variable einem von mehreren angegebenen Typen entspricht.

Union-Typen verwenden das Pipe-Zeichen (|), um mehrere Typen zu kombinieren. Die Syntax liest sich natürlich als „dies ODER das“:

let userId: string | number;

userId = "user123";  // Gültig - String
userId = 42;         // Gültig - Zahl
userId = true;       // Fehler - Boolean nicht erlaubt

Sie können beliebige Typen in einer Union kombinieren, nicht nur Primitive. Diese Flexibilität macht Union-Typen besonders nützlich für Funktionsparameter, die mehrere Eingabeformate akzeptieren müssen:

function displayMessage(content: string | number): void {
  console.log("Message: " + content);
}

displayMessage("Hello!");  // Funktioniert mit String
displayMessage(404);       // Funktioniert mit Number

Union-Typen bieten Typsicherheit bei gleichzeitiger Beibehaltung der Flexibilität – TypeScript stellt sicher, dass Sie nur Werte verwenden, die einem der angegebenen Typen entsprechen, wodurch Laufzeitfehler durch unerwartete Datentypen verhindert werden.

Aufgabe

Einfach

Erstellen Sie eine Funktion namens printId, die einen Parameter namens id vom Typ string | number akzeptiert und diesen auf der Konsole ausgibt. Die Funktion sollte einen expliziten Rückgabetyp von void haben.

Erstellen Sie eine weitere Funktion namens processValue, die einen Parameter namens data vom Typ boolean | string akzeptiert und diesen unverändert zurückgibt. Die Funktion sollte einen expliziten Rückgabetyp von boolean | string haben.

Erstellen Sie eine dritte Funktion namens formatOutput, die einen Parameter namens input vom Typ number | string akzeptiert und einen formatierten String zurückgibt. Wenn die Eingabe eine Zahl ist, geben Sie "Number: [input]" zurück. Wenn die Eingabe ein String ist, geben Sie "Text: [input]" zurück. Die Funktion sollte einen expliziten Rückgabetyp von string haben.

Die folgenden Eingaben werden bereitgestellt:

Erste Eingabe: ein Wert, der entweder ein String oder eine Zahl sein kann (für printId)
Zweite Eingabe: ein Wert, der entweder ein Boolean oder ein String sein kann (für processValue)
Dritte Eingabe: ein Wert, der entweder eine Zahl oder ein String sein kann (für formatOutput)

Lesen Sie die drei Eingaben ein, rufen Sie jede Funktion mit der entsprechenden Eingabe auf und verarbeiten Sie die Ausgaben wie folgt:

Rufen Sie printId mit der ersten Eingabe auf (dies erfolgt direkt als Ausgabe)
Rufen Sie processValue mit der zweiten Eingabe auf und geben Sie den zurückgegebenen Wert aus
Rufen Sie formatOutput mit der dritten Eingabe auf und geben Sie den zurückgegebenen Wert aus

Hinweis: Die erste Eingabe wird als String bereitgestellt. Wenn sie jedoch eine Zahl darstellt (wie "123"), konvertieren Sie diese in eine Zahl, bevor Sie sie an printId übergeben. Die zweite Eingabe wird als String bereitgestellt. Wenn sie jedoch "true" oder "false" ist, konvertieren Sie diese in den entsprechenden Boolean-Wert. Die dritte Eingabe wird als String bereitgestellt. Wenn sie jedoch eine Zahl darstellt, konvertieren Sie diese in eine Zahl.

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 input1 = inputs[0];
const input2 = inputs[1];
const input3 = inputs[2];

// Eingaben in entsprechende Typen umwandeln
const firstInput = isNaN(Number(input1)) ? input1 : Number(input1);
const secondInput = input2 === "true" ? true : input2 === "false" ? false : input2;
const thirdInput = isNaN(Number(input3)) ? input3 : Number(input3);

// TODO: Schreiben Sie Ihren Code hier
// Erstellen Sie die drei Funktionen: printId, processValue und formatOutput

// TODO: Rufen Sie die Funktionen mit den entsprechenden Eingaben auf und verarbeiten Sie die Ausgaben