Union- und Intersection-Typen

Willkommen zur nächsten Lektion! In dieser Lektion lernen Sie, wie Sie Union-Typen verwenden, damit eine Variable mehrere mögliche Typen zulassen kann, und wie Sie mit Intersection-Typen mehrere Typen zu einem einzigen kombinieren. Diese leistungsstarken Werkzeuge helfen Ihnen dabei, flexiblen und robusten Code zu erstellen. Legen wir los!

Was sind Union-Typen?

Mit Union-Typen kann eine Variable mehr als einen Typ enthalten. Sie können das Symbol | verwenden, um einen Union-Typ zu definieren.

Beispiel: Eine Variable, die entweder ein string oder eine number sein kann:

Aufgabe: Deklarieren Sie eine Variable mit einem Union-Typ und weisen Sie ihr unterschiedliche Werte zu.

let value: string | number;
value = "Hello";
console.log(value); // Output: "Hello"

value = 42;
console.log(value); // Output: 42

Union-Typen in Funktionen verwenden

Sie können Union-Typen in Funktionsparametern verwenden, um mehrere Eingabetypen zuzulassen. Beispiel:

Aufgabe: Schreiben Sie eine Funktion, die einen Parameter vom Typ Union akzeptiert und ihn in der Konsole ausgibt.

function printValue(value: string | number): void {
  console.log(`The value is ${value}`);
}

printValue("Hello"); // Output: The value is Hello
printValue(100); // Output: The value is 100

Was sind Intersection-Typen?

Intersection-Typen kombinieren mehrere Typen zu einem einzigen. Sie können das Symbol & verwenden, um einen Intersection-Typ zu definieren.

Beispiel: Zwei Objekttypen kombinieren:

Aufgabe: Erstellen Sie einen Intersection-Typ, der zwei Objekte kombiniert, und verwenden Sie ihn.

type Person = { name: string };
type Employee = { employeeId: number };

type Staff = Person & Employee;

let staffMember: Staff = {
  name: "Alice",
  employeeId: 123,
};

console.log(staffMember);

Type Guards mit Union-Typen verwenden

TypeScript weiß nicht, welchen Typ Sie bei einem Union-Typ verwenden. Sie können Type Guards verwenden, um den Typ einzugrenzen. Beispiel:

Aufgabe: Verwenden Sie Type Guards, um unterschiedliche Typen in einem Union-Typ zu verarbeiten.

function display(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value.toUpperCase()}`);
  } else {
    console.log(`Number value: ${value * 2}`);
  }
}

display("Hello"); // Output: String value: HELLO
display(5); // Output: Number value: 10

Intersection-Typen in der Praxis

Intersection-Typen sind nützlich, wenn Sie mit Objekten arbeiten, die Eigenschaften gemeinsam haben. Beispiel:

Aufgabe: Erstellen Sie einen Intersection-Typ für die Rollen Admin und User.

type Admin = { adminLevel: string };
type User = { username: string };

type AdminUser = Admin & User;

let admin: AdminUser = {
  adminLevel: "super",
  username: "admin123",
};

console.log(`Admin ${admin.username} has level ${admin.adminLevel}`);

Häufige Fehler bei Union- und Intersection-Typen

Hier sind einige häufige Fehler:

• Einen Union-Typ verwenden, aber nicht alle möglichen Fälle verarbeiten (z. B. einen Type Guard vergessen).
• Typen durch unnötige Intersections unnötig kompliziert machen.
• Inkompatible Werte einem Union- oder Intersection-Typ zuweisen.

Tipp: Testen Sie Ihren Code immer, um sicherzustellen, dass die Typen wie erwartet funktionieren!

Wann Sie Union- und Intersection-Typen verwenden

Verwenden Sie Union-Typen, wenn:

• Eine Variable einen von mehreren möglichen Typen haben kann.
• Sie Flexibilität bei Funktionsparametern benötigen.

Verwenden Sie Intersection-Typen, wenn:

• Sie mehrere Objekte oder Typen zu einem einzigen kombinieren.
• Sie komplexere Typen für bestimmte Anwendungsfälle erstellen.

Gut gemacht!

Glückwunsch! Sie haben gelernt, wie Sie Union- und Intersection-Typen verwenden, um komplexe Szenarien in TypeScript zu bewältigen. Diese Werkzeuge machen Ihren Code flexibler und ausdrucksstärker. In der nächsten Lektion sehen wir uns Enums und ihre Verwendung zur Verwaltung konstanter Werte an. Programmieren wir weiter!