1~
2TypeScript ist zum Industriestandard für die groß angelegte Webentwicklung geworden. Während die meisten Entwickler die Grundlagen von Schnittstellen und Typen kennen, liegt die wahre Kraft in seinem fortgeschrittenen Typsystem. Hier sind 5 Muster, die Sie als Senior-Entwickler auszeichnen werden.
3~
4## 1. Generic Constraints
5~
6Generics sind mächtig, aber manchmal müssen Sie einschränken, was übergeben werden kann. `extends` ist hier Ihr Freund.
7~
8```typescript
9interface HasId {
10  id: string;
11}
12~
13function getById<T extends HasId>(list: T[], id: string): T | undefined {
14  return list.find((item) => item.id === id);
15}
16```
17~
18Indem wir sicherstellen, dass `T` `HasId` erweitert, garantieren wir, dass der Zugriff auf `.id` innerhalb der Funktion sicher ist.
19~
20## 2. Conditional Types
21~
22Bedingte Typen ermöglichen es Ihnen, ungleichmäßige Typzuordnungen zu erstellen. Die Syntax ähnelt dem ternären Operator in JavaScript.
23~
24```typescript
25type IsString<T> = T extends string ? true : false;
26~
27type A = IsString<string>; // true
28type B = IsString<number>; // false
29```
30~
31Ein praktischer Anwendungsfall ist das Herausfiltern von Typen aus einer Union:
32~
33```typescript
34type Diff<T, U> = T extends U ? never : T;
35type NonNullable<T> = Diff<T, null | undefined>;
36```
37~
38## 3. Mapped Types
39~
40Zugeordnete Typen ermöglichen es Ihnen, neue Typen basierend auf alten zu erstellen, indem Sie Eigenschaften transformieren.
41~
42```typescript
43type ReadOnly<T> = {
44  readonly [P in keyof T]: T[P];
45};
46~
47interface User {
48  name: string;
49  age: number;
50}
51~
52type ReadOnlyUser = ReadOnly<User>;
53```
54~
55Sie können sogar Modifikatoren hinzufügen oder entfernen:
56~
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62~
63## 4. Template Literal Types
64~
65In TypeScript 4.1 eingeführt, ermöglichen diese die direkte Manipulation von String-Typen.
66~
67```typescript
68type World = 'world';
69type Greeting = `hello ${World}`; // "hello world"
70~
71type Color = 'red' | 'blue';
72type Quantity = 'light' | 'dark';
73~
74type Palette = `${Quantity}-${Color}`;
75// "light-red" | "light-blue" | "dark-red" | "dark-blue"
76```
77~
78Dies ist unglaublich nützlich für die Typisierung von Strings, die einem bestimmten Muster folgen, wie CSS-Klassen oder Ereignisnamen.
79~
80## 5. Das `infer` Schlüsselwort
81~
82Das `infer` Schlüsselwort innerhalb von bedingten Typen ermöglicht es Ihnen, Typen aus anderen Typen zu extrahieren.
83~
84```typescript
85type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
86~
87function check(): boolean {
88  return true;
89}
90~
91type CheckReturn = ReturnType<typeof check>; // boolean
92```
93~
94Hier bitten wir TypeScript, den Rückgabetyp `R` einer Funktion zu "inferieren" (abzuleiten) und ihn zurückzugeben.
95~
96## Fazit
97~
98Das Beherrschen dieser Muster ermöglicht es Ihnen, Bibliotheken und Dienstprogramme zu schreiben, die robust sind und eine hervorragende Entwicklererfahrung (DX) bieten. Das Ziel von fortgeschrittenem TypeScript ist nicht Komplexität um der Komplexität willen, sondern Sicherheit und Ausdruckskraft.
99~