Conditional Types 1 2 3

Conditional Types (Bedingte Typen) sind ein fortgeschrittenes Feature in TypeScript, das es ermöglicht, Typen basierend auf einer Bedingung zu definieren. Sie ähneln den ternären Operatoren in JavaScript (condition ? trueResult : falseResult), nur dass sie sich auf Typen anstatt auf Werte beziehen. Dieses Feature ist besonders nützlich, um flexiblere und präzisere Typdefinitionen zu erstellen, insbesondere wenn man mit generischen Typen arbeitet.

Grundlagen Bedingter Typen

Die grundlegende Syntax eines bedingten Typs sieht wie folgt aus:

T extends U ? X : Y

Hierbei bedeutet das:

T: Der Typ, der geprüft wird.
U: Der Typ, gegen den T geprüft wird.
extends: Das Schlüsselwort, das die Bedingung definiert. Es prüft, ob T ein Subtyp von U ist.
X: Der Typ, der zurückgegeben wird, wenn die Bedingung erfüllt ist (T ist ein Subtyp von U).
Y: Der Typ, der zurückgegeben wird, wenn die Bedingung nicht erfüllt ist (T ist kein Subtyp von U).

Beispiel:

type Animal = {
  name: string;
};

type Dog = {
  name: string;
  breed: string;
};

type IsDog<T> = T extends Dog ? true : false;

type Result1 = IsDog<Dog>; // true
type Result2 = IsDog<Animal>; // false

In diesem Beispiel definieren wir zwei Typen, Animal und Dog. Der bedingte Typ IsDog prüft, ob ein gegebener Typ T ein Subtyp von Dog ist. Wenn ja, ist das Ergebnis true; andernfalls false.

Verwendung mit Generics

Bedingte Typen entfalten ihr volles Potenzial in Kombination mit generischen Typen. Sie ermöglichen es, den Typ eines generischen Typs basierend auf den Eigenschaften des Typs festzulegen, der als Typargument übergeben wird. Dies ist besonders nützlich bei Funktionen und Klassen, die mit verschiedenen Datentypen arbeiten können.

Beispiel:

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

function add(x: number, y: number): number {
  return x + y;
}

type AddReturnType = ReturnType<typeof add>; // number

In diesem Beispiel definieren wir einen bedingten Typ ReturnType, der den Rückgabetyp einer Funktion ermittelt. Der infer Schlüsselwort wird verwendet, um den Rückgabetyp aus der Funktionstypdefinition zu extrahieren. Wenn T ein Funktionstyp ist, dann ist R der Rückgabetyp; andernfalls ist das Ergebnis any. Die typeof operator wird benötigt um den Type von add zu erhalten, damit wir ihn an ReturnType übergeben können.

infer Schlüsselwort

Das infer Schlüsselwort ist ein zentrales Element bei der Verwendung bedingter Typen. Es ermöglicht, einen Typ innerhalb der Bedingung zu "erraten" oder zu extrahieren. Der erratene Typ kann dann im resultierenden Typ verwendet werden. Dies ist besonders nützlich, um Informationen aus komplexen Typen zu extrahieren, wie z. B. Funktionsparameter oder Rückgabetypen.

Beispiel:

type ParamType<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

function logMessage(message: string): void {
  console.log(message);
}

type LogMessageParams = ParamType<typeof logMessage>; // [string]

In diesem Beispiel extrahieren wir die Parametertypen der Funktion logMessage mithilfe des infer Schlüsselworts. P wird auf den Typ der Parameter gesetzt, wenn T ein Funktionstyp ist. Andernfalls ist das Ergebnis never, was bedeutet, dass der Typ nicht existiert.

Verteilte Bedingte Typen

Bedingte Typen verhalten sich verteilt (distributive), wenn der zu prüfende Typ T ein Union-Typ ist. Das bedeutet, dass die Bedingung für jeden Typ in der Union separat ausgewertet wird, und das Ergebnis ist eine Union der Ergebnisse. Dieses Verhalten ist besonders nützlich, um komplexe Typmanipulationen durchzuführen.

Beispiel:

type ToArray<T> = T extends any ? T[] : never;

type NumberOrString = number | string;

type NumberOrStringArray = ToArray<NumberOrString>; // number[] | string[]

In diesem Beispiel ist NumberOrString ein Union-Typ. Wenn wir ToArray auf diesen Typ anwenden, wird die Bedingung separat für number und string ausgewertet, was zu der Union number[] | string[] führt. Wenn man das distributive Verhalten unterdrücken möchte, kann man den Typ T in eckige Klammern setzen: [T] extends any ? T[] : never. Damit wird der Union Type wie ein Typ behandelt.

Anwendungsbereiche

Bedingte Typen können in einer Vielzahl von Szenarien eingesetzt werden, um Typen flexibler und präziser zu definieren. Hier sind einige Beispiele:

Typsicherheit bei Funktionen mit unterschiedlichen Argumenten: Ermöglicht es, den Rückgabetyp einer Funktion basierend auf den Argumenten zu definieren.
Typmanipulation: Hilft, bestehende Typen zu verändern oder neue Typen basierend auf bestehenden zu erstellen.
Überprüfung von Typen: Kann verwendet werden, um zu prüfen, ob ein Typ bestimmte Eigenschaften erfüllt.
Erstellung von Typ-Guards: Hilft, den Typ einer Variable innerhalb eines bedingten Blocks einzugrenzen.

Beispiel: Typ-Guard

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

type Animal2 = Bird | Fish;

function isBird(animal: Animal2): animal is Bird {
  return 'fly' in animal;
}

function doSomething(animal: Animal2) {
  if (isBird(animal)) {
    animal.fly(); // TypeScript weiß, dass animal vom Typ Bird ist.
  } else {
    animal.swim(); // TypeScript weiß, dass animal vom Typ Fish ist.
  }
}

Hier verwenden wir eine Type Guard Funktion isBird, um zu überprüfen, ob ein Animal2 Objekt ein Bird ist. Der Rückgabetyp animal is Bird ist hier der entscheidende Punkt. Innerhalb des if Blocks weiß TypeScript, dass animal vom Typ Bird ist und kann die Methode fly() sicher aufrufen.

Vorteile Bedingter Typen

Flexibilität: Ermöglichen es, Typen basierend auf Bedingungen zu definieren.
Präzision: Helfen, genauere Typdefinitionen zu erstellen.
Typsicherheit: Verbessern die Typsicherheit des Codes.
Wiederverwendbarkeit: Können verwendet werden, um generische Typen zu definieren, die in verschiedenen Kontexten eingesetzt werden können.

Nachteile Bedingter Typen

Komplexität: Können komplex und schwer verständlich sein, insbesondere für Anfänger.
Wartbarkeit: Komplexe bedingte Typen können schwer zu warten sein.
Performance: Übermäßiger Einsatz von bedingten Typen kann die Kompilierzeit erhöhen.

Fazit

Bedingte Typen sind ein mächtiges Feature in TypeScript, das es ermöglicht, Typen flexibler und präziser zu definieren. Sie sind besonders nützlich in Kombination mit generischen Typen und können in einer Vielzahl von Szenarien eingesetzt werden. Es ist jedoch wichtig, sie mit Bedacht einzusetzen, da sie die Komplexität des Codes erhöhen können. Durch ein solides Verständnis der Grundlagen und Anwendungsbereiche können bedingte Typen jedoch dazu beitragen, typsicheren und wartbaren Code zu schreiben.

Für Einsteiger ist es ratsam, sich zunächst mit den Grundlagen der generischen Typen und der TypeScript-Typeninferenz vertraut zu machen, bevor man sich mit bedingten Typen auseinandersetzt. Experimentieren Sie mit einfachen Beispielen, um ein Gefühl für die Funktionsweise von bedingten Typen zu bekommen. Nutzen Sie die TypeScript Dokumentation als umfassende Ressource um Ihr Wissen zu vertiefen. Das Verständnis und die Anwendung bedingter Typen wird die Qualität und Robustheit Ihres TypeScript-Codes deutlich verbessern. Es ist ein Werkzeug, das, richtig eingesetzt, Ihre Entwicklungserfahrung bereichern und Ihre Fähigkeit, komplexe Typen zu modellieren, erweitern wird.