TypeScript - Unionstypen: Eine freundliche Einführung für Anfänger

Hallo da draußen, zukünftiger Codingsuperstar! ? Bist du bereit, in die wunderbare Welt von TypeScript einzutauchen und eines seiner kraftvollsten Features zu lernen? Heute werden wir Unionstypen erkunden, ein Konzept, das zunächst einschüchternd klingen mag, aber ich verspreche dir, du wirst es super nützlich und sogar spaßig finden, wenn du diesen Leitfaden bis zum Ende liest!

Als dein freundlicher Nachbarschafts-Computerlehrer habe ich unzählige Schüler gesehen, die aufleuchten, wenn sie dieses Konzept verstehen. Also, lasst uns gemeinsam auf diese Reise gehen,好不好?

Was sind Unionstypen?

Bevor wir ins Detail gehen, beginnen wir mit einer einfachen Analogie. Stell dir vor, du hast eine magische Box, die entweder ein Spielzeugauto oder ein Plüschtier aufnehmen kann, aber nicht beides gleichzeitig. Das ist so, wie ein Unionstyp in TypeScript funktioniert – es ist eine Möglichkeit, unserem Code mitzuteilen, dass eine Variable mehrere Typen sein kann.

Nun, lassen wir uns mit ein wenig Code beschäftigen!

Syntax: Union Literal

Die grundlegende Syntax für einen Unionstyp verwendet das senkrechte Strichsymbol (|), um die verschiedenen Typen zu trennen. Es ist, als würde man TypeScript sagen: "Hey, das kann das ODER das sein!"

let mein Liebl: string | number;

mein Liebl = "TypeScript"; // Das ist gültig
console.log(mein Liebl); // Ausgabe: TypeScript

mein Liebl = 42; // Das ist auch gültig
console.log(mein Liebl); // Ausgabe: 42

// mein Liebl = true; // Das würde einen Fehler verursachen

In diesem Beispiel kann mein Liebl entweder eine Zeichenkette oder eine Zahl sein. Es ist wie unsere magische Box, die entweder ein Wort oder eine Zahl aufnehmen kann, aber nichts anderes. Wenn wir versucht hätten, ein Boolean (wie true) hineinzulegen, würde TypeScript uns mit einem Zauberstab einen Fehler zeigen.

Unionstypen Variable

Lassen wir unser vorheriges Beispiel erweitern und sehen, wie Unionstypen unseren Code flexibler machen können:

type Tier = "katze" | "hund" | "fisch";
let meinTier: Tier;

meinTier = "katze"; // Das ist gültig
console.log(`Ich habe ein ${meinTier}`); // Ausgabe: Ich habe ein katze

meinTier = "hund"; // Das ist auch gültig
console.log(`Ich habe ein ${meinTier}`); // Ausgabe: Ich habe ein hund

// meinTier = "elefant"; // Das würde einen Fehler verursachen

Hier haben wir einen benutzerdefinierten Typ namens Tier erstellt, der nur eine von drei spezifischen Zeichenketten sein kann. Es ist wie ein Tierladen, der nur Katzen, Hunde und Fische verkauft. Wenn du versuchst, einen Elefanten zu kaufen, sorry, das geht nicht!

Unionstypen und Funktion parameter

Unionstypen sind besonders nützlich, wenn wir sie mit Funktionen verwenden. Sie erlauben es unseren Funktionen, flexibler zu sein, ohne die Typsicherheit zu verlieren. Sehen wir uns ein Beispiel an:

function printId(id: number | string) {
console.log(`Deine ID ist: ${id}`);
}

printId(101); // Ausgabe: Deine ID ist: 101
printId("202"); // Ausgabe: Deine ID ist: 202

// printId(true); // Das würde einen Fehler verursachen

In dieser Funktion kann printId entweder eine Zahl oder eine Zeichenkette als Argument akzeptieren. Es ist wie ein universeller Ausweisleser, der sowohl numerische als auch textbasierte IDs verarbeiten kann. Aber wenn du versuchst, deine boolesche Ausweiskarte zu verwenden, wird er höflich ablehnen!

Unionstypen und Arrays

Nun, lassen wir uns steigern und sehen, wie Unionstypen mit Arrays funktionieren. Bereit für ein bisschen Array-Zauber!

let gemischtesArray: (number | string)[] = [1, "zwei", 3, "vier", 5];

console.log(gemischtesArray); // Ausgabe: [1, "zwei", 3, "vier", 5]

gemischtesArray.push(6); // Das ist gültig
gemischtesArray.push("sieben"); // Das ist auch gültig

// gemischtesArray.push(true); // Das würde einen Fehler verursachen

console.log(gemischtesArray); // Ausgabe: [1, "zwei", 3, "vier", 5, 6, "sieben"]

Hier haben wir ein Array erstellt, das sowohl Zahlen als auch Zeichenketten enthalten kann. Es ist wie eine Playlist, die sowohl Tracknummern als auch Songtitel enthalten kann. Aber wenn du versuchst, ein Boolean hineinzuschmuggeln, wird TypeScript dich ertappen!

Praktische Anwendungsfälle

Nun, da wir die Grundlagen abgedeckt haben, schauen wir uns einige realistische Szenarien an, in denen Unionstypen den Tag retten können:

1. API-Antworten: Beim Arbeiten mit APIs kann die empfangenen Daten manchmal verschiedenen Typen sein. Unionstypen helfen dir, diese Variationen elegant zu handhaben.

type ApiAntwort = {
status: "erfolg" | "fehler";
data: string | number | null;
};

function handleResponse(response: ApiAntwort) {
if (response.status === "erfolg") {
console.log(`Erfolg! Daten: ${response.data}`);
} else {
console.log("Ein Fehler ist aufgetreten");
}
}

handleResponse({ status: "erfolg", data: "Benutzerprofil geladen" });
handleResponse({ status: "fehler", data: null });

2. Konfigurationsoptionen: Bei der Erstellung konfigurierbarer Funktionen erlauben Unionstypen es dir, eine Reihe gültiger Optionen bereitzustellen.

type Farbe = "rot" | "grün" | "blau";
type Größe = "klein" | "mittel" | "groß";

function createButton(color: Farbe, size: Größe) {
console.log(`Erstelle eine ${color} Schaltfläche in Größe ${size}`);
}

createButton("rot", "mittel"); // Gültig
// createButton("gelb", "extra-groß"); // Das würde einen Fehler verursachen

Häufige Unionstypen-Methoden

Hier ist eine Tabelle einiger häufiger Methoden, die du mit Unionstypen verwenden kannst:

Methode	Beschreibung	Beispiel
typeof	Überprüft den Typ eines Wertes	typeof x === "string"
instanceof	Überprüft, ob ein Objekt eine Instanz einer spezifischen Klasse ist	x instanceof Date
in	Überprüft, ob eine Eigenschaft in einem Objekt existiert	"name" in x
Array.isArray()	Überprüft, ob ein Wert ein Array ist	Array.isArray(x)

Schlussfolgerung

Puh! Wir haben heute viel Boden coberet, oder? Unionstypen mögen initially etwas knifflig erscheinen, aber sie sind unglaublich mächtige Werkzeuge in deinem TypeScript-Werkzeugkasten. Sie erlauben es dir, flexibleren und robusteren Code zu schreiben, indem sie potenzielle Fehler bereits im Voraus entdecken.

Denke daran, Codieren ist wie das Lernen einer neuen Sprache – es erfordert Übung und Geduld. Lass dich nicht entmutigen, wenn du es nicht sofort verstehst. Bleibe experimentierfreudig, bleibe am Code und bevor du es merkst, wirst du Unionstypen wie ein Profi verwenden!

Als wir uns verabschieden, erinnere ich mich an einen Schüler, der mir einmal sagte: "Unionstypen sind wie ein Schweizer Taschenmesser für meinen Code!" Und du weißt was? Er hatte absolut recht. Also, jungerCoder, möge deine Unionstypen immer in deiner Gunst sein! ??

Credits: Image by storyset