TypeScript - Literal Types: A Beginner's Guide

Hallo, zukünftiger Codingsuperstar! Heute tauchen wir in die aufregende Welt der TypeScript-Literal-Typen ein. Mach dir keine Sorgen, wenn du neu im Programmieren bist – ich werde dein freundlicher Guide auf diesem Abenteuer sein. Am Ende dieses Tutorials wirst du Literal-Typen wie ein Profi einsetzen können!

Was sind Literal-Typen?

Bevor wir loslegen, stellen wir uns vor, du bestellst eine Pizza. Du kannst nicht einfach sagen: "Ich will eine Pizza." Du musst die Größe angeben: klein, medium oder groß. In TypeScript sind Literal-Typen wie diese spezifischen Pizzagrößen – sie sind exakte Werte, die eine Variable haben kann.

Syntax

Die Syntax für Literal-Typen ist einfach. Du verwendest einfach den genauen Wert, den du zulassen möchtest. Sehen wir uns ein einfaches Beispiel an:

let pizzaSize: "small" | "medium" | "large";

In diesem Fall kann pizzaSize nur "small", "medium" oder "large" sein. Nichts anderes ist erlaubt – nicht einmal "extra large" oder "klein"!

String-Literal-Typen

String-Literal-Typen sind die am häufigsten vorkommenden und am einfachsten zu verstehenden. Sie sind genau das, was sie wie klingen – spezifische Zeichenketten, die eine Variable sein kann.

Beispiel 1: Wochentage

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // Das ist in Ordnung
today = "Someday"; // Fehler! Der Typ '"Someday"' ist nicht zuweisbar an den Typ 'DayOfWeek'.

In diesem Beispiel ist DayOfWeek ein Typ, der nur einen der sieben Wochentage sein kann. Versuche, eine andere Zeichenkette zuzuweisen, und TypeScript wird dir den Finger Zeigen!

Beispiel 2: Farben der Verkehrsampel

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`Die Lampe hat auf ${color} gewechselt`);
}

changeLight("Green"); // Funktioniert prima
changeLight("Purple"); // Fehler! Argument des Typs '"Purple"' ist nicht zuweisbar an den Parameter-Typ 'TrafficLightColor'.

Hier stellen wir sicher, dass unsere Verkehrsampel nur in gültige Farben wechseln kann. Keine Diskolichter auf dieser Straße!

Numerische Literal-Typen

Genau wie bei Zeichenketten können wir Literal-Typen mit Zahlen erstellen. Das ist großartig, wenn du einen Wert auf spezifische Zahlen beschränken möchtest.

Beispiel 3: Würfelwürfe

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`Du hast eine ${myRoll} gewürfelt`);

In diesem Beispiel stellen wir sicher, dass unser Würfel nur Zahlen von 1 bis 6 werfen kann. Keine manipulierten Würfel in unserem Spiel!

Beispiel 4: Hemdgrößen

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // Fehler! Der Typ '41' ist nicht zuweisbar an den Typ 'ShirtSize'.

Hier beschränken wir Hemdgrößen auf spezifische Zahlen. Keine Zwischengrößen in diesem Geschäft!

Kombinierte Literal-Typen

Die wahre Kraft der Literal-Typen zeigt sich, wenn wir verschiedene Arten von Literalen kombinieren.

Beispiel 5: Spielcharakterstatus

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // Das ist auch gültig
hero = "Wounded"; // Fehler! Der Typ '"Wounded"' ist nicht zuweisbar an den Typ 'CharacterStatus'.

In diesem Spiel kann ein Charakter "Alive", "Dead", 1 (repräsentierend für lebendig) oder 0 (repräsentierend für tot) sein. Es ist, als hätte man sowohl eine Text- als auch eine Code-Darstellung!

Anwendungsfälle für Literal-Typen

Literal-Typen sind in vielen Szenarien unglaublich nützlich. Lassen wir uns einige anschauen:

1. Funktion parameter

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// Die Anfrage senden
console.log(`Sending ${method} request to ${url}`);
}

sendRequest("https://api.example.com", "GET"); // Funktioniert prima
sendRequest("https://api.example.com", "FETCH"); // Fehler! Argument des Typs '"FETCH"' ist nicht zuweisbar an den Parameter-Typ 'HttpMethod'.

Durch die Verwendung eines Literal-Typs für die HTTP-Methode stellen wir sicher, dass nur gültige Methoden verwendet werden können.

2. Konfigurationsobjekte

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

Literal-Typen helfen uns dabei, strenge Konfigurationsobjekte zu erstellen, die Tippfehler und ungültige Einstellungen verhindern.

3. Zustandsautomaten

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// Anmelde-Logik ausführen
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

Hier verwenden wir Literal-Typen, um verschiedene Zustände in einem Anmeldeprozess darzustellen, sicherzustellen, dass der Zustand nur eine der vordefinierten Werte sein kann.

Methoden-Tabelle

Hier ist eine Tabelle, die die wichtigsten Methoden und Konzepte zusammenfasst, die wir behandelt haben:

Methode/Konzept	Beschreibung	Beispiel
Typendeklaration	Definieren eines neuen Typs mit Literalwerten	type DayOfWeek = "Monday" \| "Tuesday" \| ...
Variablenzuweisung	Zuweisen eines Literal-Typs zu einer Variablen	let today: DayOfWeek = "Monday";
Funktion parameter	Verwendung von Literal-Typen in Funktion parameter	function sendRequest(method: HttpMethod) {...}
Kombinierte Literale	Mischen verschiedener Literal-Typen	type Status = "Active" \| "Inactive" \| 0 \| 1;
Schnittstellen-Eigenschaften	Verwendung von Literal-Typen in Schnittstellen-Eigenschaften	interface Config { theme: "light" \| "dark" }

Und da hast du es, mein codender Lehrling! Du hast grade in deiner TypeScript-Reise einen Level aufgestiegen, indem du Literal-Typen gemeistert hast. Denke daran, wie das Auswählen der perfekten Pizzabelag帮助你具体并避免错误。继续练习， und bald wirst du sicherer Code erstellen, der so lecker ist wie eine perfekt gebackene Pizza! ??

Credits: Image by storyset