Die Beherrschung der Bedingten Typen in TypeScript

Ah, bedingte Typen in TypeScript... Sie sind wie Chamäleons, die ihre Form ändern und sich an die Bedürfnisse deines Codes anpassen! Vielleicht kennst du bereits die grundlegenden Typen, aber mit bedingten Typen gehen wir auf ein höheres Level. Stell dir intelligente Typen vor, die sich wie Superhelden der Typisierung an die Situation anpassen. Also, mach es dir bequem und bereite dich darauf vor, deinem TypeScript-Code etwas Magie hinzuzufügen! 🧙‍♂️

Warum bedingte Typen verwenden? 🧐

In TypeScript lieben wir es, wenn alles gut organisiert und gut typisiert ist. Aber manchmal braucht unser Code einen Typ, der sich an bestimmte Bedingungen anpasst. Stell dir vor, du hast eine Funktion, die entweder einen string oder eine number zurückgibt, abhängig von den Eingabeparametern. 😱 Ohne bedingte Typen müsstest du jeden Fall manuell behandeln, und das wird schnell mühsam! Zum Glück sind bedingte Typen da, um Flexibilität und Reaktivität zu bieten, wie ein Typing-Ninja. 🥷

Die Grundlagen: Syntax der bedingten Typen 🧩

Bedingte Typen sind wie ein ternärer Operator, aber für Typen. Hier ist ein Beispiel, das dir Appetit machen soll:

typescript

In diesem Beispiel ist IsString ein bedingter Typ, der prüft, ob T ein string ist. Wenn ja, gibt er "Das ist ein String" zurück, wenn nicht "Das ist kein String". Das ist einfach, aber warte ab, was wir in fortgeschritteneren Fällen damit machen können!

Praxisfall: Typen je nach Konfiguration anpassen 🛠️

Stellen wir uns eine Funktion vor, die einen Konfigurationsparameter nimmt und je nach dieser Konfiguration einen anderen Typ zurückgeben muss. Bedingte Typen sind perfekt für diese Art von Magie ✨!

Codebeispiel

typescript

In diesem Beispiel passt Response<T> den Typ an, je nachdem ob mode "einfach" oder "detailliert" ist. Die Magie wirkt: fetchData(einfacheConfig) gibt ein Objekt nur mit data zurück, während fetchData(detaillierteConfig) auch details enthält. Praktisch, oder?

Verschachtelte bedingte Typen: Typisierung nach Maß 🧇

Warum hier aufhören? Du kannst auch bedingte Typen verschachteln, um noch präzisere Fälle zu behandeln! Stell dir vor, du möchtest den Typ nicht nur nach dem mode anpassen, sondern auch danach, ob der Benutzer authentifiziert ist oder nicht. Bereit für typographische Hochseilakrobatik? 🎢

typescript

Hier passt UserResponse den Typ basierend auf zwei Kriterien an: mode und isAuthenticated. Das Ergebnis? Eine ultrapräzise Typisierung, die alle möglichen Fälle abdeckt!

Fortgeschrittene bedingte Typen mit `infer`: Typableitung 🕵️‍♂️

Bereit für einen kleinen Zaubertrick? TypeScript bietet ein spezielles Schlüsselwort in bedingten Typen: infer. Damit kannst du einen Typ direkt in deinem bedingten Typ ableiten. Praktisch, um Informationen aus komplexen Typen zu extrahieren!

Beispiel mit `infer`

typescript

Hier verwendet ReturnTypeOfFunction infer R, um den Rückgabetyp einer Funktion abzuleiten. In diesem Beispiel wird HelloReturnType vom Typ string sein, da getHello eine Zeichenkette zurückgibt.

Fazit 🎉

Bedingte Typen in TypeScript sind wie eine Superkraft für deinen Code. Sie ermöglichen es dir, dynamische Typen zu erstellen und eine strenge Typisierung beizubehalten, während der Code übersichtlich bleibt. Also, bereit, deine Kollegen zu beeindrucken? Experimentiere mit diesen bedingten Typen und entdecke neue Wege, deinen TypeScript-Code zu strukturieren! 🚀

Keine Ausreden mehr für ungenaue Typen: Mit bedingten Typen wird dein TypeScript-Code einfach unschlagbar! 👌

1type IsString<T> = T extends string
2  ? 'Das ist ein String'
3  : 'Das ist kein String';

1type Config = {
2  mode: 'einfach' | 'detailliert';
3};
4
5type Response<T extends Config> = T['mode'] extends 'einfach'
6  ? { data: string }
7  : { data: string; details: string[] };
8
9function fetchData<T extends Config>(config: T): Response<T> {
10  if (config.mode === 'einfach') {
11    return { data: 'Vereinfachte Daten' } as Response<T>;
12  } else {
13    return {
14      data: 'Vollständige Daten',
15      details: ['Detail1', 'Detail2'],
16    } as Response<T>;
17  }
18}
19
20const einfacheConfig = { mode: 'einfach' };
21const detaillierteConfig = { mode: 'detailliert' };
22
23const einfachesErgebnis = fetchData(einfacheConfig); // { data: "Vereinfachte Daten" }
24const detailliertesErgebnis = fetchData(detaillierteConfig); // { data: "Vollständige Daten", details: [...] }

1type UserResponse<
2  T extends Config,
3  Authenticated extends boolean,
4> = Authenticated extends true
5  ? T['mode'] extends 'einfach'
6    ? { data: string }
7    : { data: string; details: string[] }
8  : { error: 'Nicht authentifiziert' };
9
10function fetchUserData<T extends Config, Authenticated extends boolean>(
11  config: T,
12  isAuthenticated: Authenticated,
13): UserResponse<T, Authenticated> {
14  if (!isAuthenticated) {
15    return { error: 'Nicht authentifiziert' } as UserResponse<T, Authenticated>;
16  }
17  if (config.mode === 'einfach') {
18    return { data: 'Vereinfachte Daten' } as UserResponse<T, Authenticated>;
19  } else {
20    return {
21      data: 'Vollständige Daten',
22      details: ['Detail1', 'Detail2'],
23    } as UserResponse<T, Authenticated>;
24  }
25}
26
27const authEinfachErgebnis = fetchUserData(einfacheConfig, true); // { data: "Vereinfachte Daten" }
28const authDetailliertErgebnis = fetchUserData(detaillierteConfig, true); // { data: "Vollständige Daten", details: [...] }
29const nichtAuthErgebnis = fetchUserData(detaillierteConfig, false); // { error: "Nicht authentifiziert" }

1type ReturnTypeOfFunction<T> = T extends (...args: any[]) => infer R
2  ? R
3  : never;
4
5function getHello(): string {
6  return 'Hallo, Welt!';
7}
8
9type HelloReturnType = ReturnTypeOfFunction<typeof getHello>; // Ergebnis: string