Literal-Typen

Willkommen zur nächsten Lektion! In dieser Lektion lernen Sie Literal-Typen kennen, eine TypeScript-Funktion, mit der Sie exakte, spezifische Werte für Variablen definieren können. Dadurch wird Ihr Code vorhersehbarer und typsicher. Sehen wir uns das genauer an!

Was sind Literal-Typen?

Mit Literal-Typen in TypeScript kann eine Variable einen bestimmten Wert enthalten, statt nur einen allgemeinen Typ wie string oder number. Beispielsweise können Sie eine Variable so beschränken, dass sie nur den Wert "yes" oder "no" enthalten kann.

Beispiel:

Aufgabe: Deklarieren Sie eine Variable mit einem Literal-Typ und weisen Sie ihr gültige und ungültige Werte zu.

let answer: "yes" | "no";
answer = "yes"; 
// Valid
// answer = "maybe"; 
// Error: Type '"maybe"' is not assignable to type '"yes" | "no"'.

Literal-Typen mit Strings

String-Literal-Typen beschränken eine Variable auf eine bestimmte Gruppe von String-Werten. Beispiel:

Aufgabe: Erstellen Sie einen Typ für Richtungen und weisen Sie einer Variable Werte zu.

type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up"; // Valid
// move = "forward"; 
// Error: Type '"forward"' is not assignable to type '"up" | "down" | "left" | "right"'.

Literal-Typen mit Zahlen

Sie können Literal-Typen auch mit Zahlen verwenden, um eine Variable auf bestimmte numerische Werte zu beschränken. Beispiel:

Aufgabe: Definieren Sie einen numerischen Literal-Typ für Würfelergebnisse und testen Sie ihn.

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

let roll: DiceRoll;
roll = 4; // Valid
// roll = 7; 
// Error: Type '7' is not assignable to type '1 | 2 | 3 | 4 | 5 | 6'.

Literal-Typen in Funktionen

Sie können Literal-Typen in Funktionsparametern verwenden, um nur bestimmte Werte zuzulassen. Beispiel:

Aufgabe: Schreiben Sie eine Funktion mit einem Parameter, der Literal-Typen verwendet.

function setStatus(status: "active" | "inactive"): void {
  console.log(`The status is now ${status}`);
}

setStatus("active"); 
// Output: The status is now active
// setStatus("pending"); 
// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'.

Literal-Typen und Typ-Aliase

Um Literal-Typen wiederzuverwenden, können Sie sie als Typ-Aliase definieren. Beispiel:

Aufgabe: Erstellen Sie einen Typ-Alias für Ampelfarben und verwenden Sie ihn in einer Variable.

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";
console.log(light);
 // Output: red

Literal-Typen mit Objekten verwenden

Sie können Literal-Typen innerhalb von Objekten verwenden, um die Werte bestimmter Eigenschaften zu beschränken. Beispiel:

Aufgabe: Erstellen Sie einen Objekttyp mit einer Eigenschaft, die Literal-Typen verwendet.

type Button = {
  label: string;
  size: "small" | "medium" | "large";
};

let submitButton: Button = {
  label: "Submit",
  size: "medium",
};

console.log(submitButton);

Häufige Fehler

Hier sind einige häufige Fehler bei der Verwendung von Literal-Typen:

• Beim Ändern eines Literal-Typs vergessen, alle zulässigen Werte zu aktualisieren.
• Werte zuweisen, die nicht im Literal-Typ enthalten sind (TypeScript erkennt dies).
• Literal-Typen für stark dynamische Daten verwenden, bei denen Flexibilität wichtiger ist.

Tipp: Verwenden Sie Literal-Typen für kontrollierte, vorhersehbare Szenarien!

Gut gemacht!

Glückwunsch! Sie haben gelernt, wie Sie Literal-Typen in TypeScript verwenden, um präzise und eingeschränkte Werte zu definieren. Literal-Typen sind besonders nützlich, um vorhersehbaren und typsicheren Code zu erstellen. In der nächsten Lektion sehen wir uns die Unterstützung von TypeScript für die Arbeit mit Funktionen an. Programmieren wir weiter!