1~
2TypeScript is de industriestandaard geworden voor grootschalige webontwikkeling. Hoewel de meeste ontwikkelaars de basisbeginselen van interfaces en types kennen, ligt de echte kracht in het geavanceerde typesysteem. Hier zijn 5 patronen die je als senior engineer onderscheiden.
3~
4## 1. Generic Constraints
5~
6Generics zijn krachtig, maar soms moet je beperken wat er kan worden doorgegeven. `extends` is hier je vriend.
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~
18Door ervoor te zorgen dat `T` `HasId` uitbreidt, garanderen we dat het benaderen van `.id` binnen de functie veilig is.
19~
20## 2. Conditional Types
21~
22Conditional types stellen je in staat om niet-uniforme type-mappings te creëren. De syntax lijkt op de ternary 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~
31Een praktisch gebruiksscenario is het filteren van types uit een 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~
40Mapped types stellen je in staat om nieuwe types te creëren op basis van bestaande types door eigenschappen te transformeren.
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~
55Je kunt zelfs modifiers toevoegen of verwijderen:
56~
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62~
63## 4. Template Literal Types
64~
65Geïntroduceerd in TypeScript 4.1, hiermee kun je string types direct manipuleren.
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~
78Dit is ontzettend handig voor het typeren van strings die een specifiek patroon volgen, zoals CSS-klassen of eventnamen.
79~
80## 5. Het `infer` Keyword
81~
82Het `infer` keyword binnen conditional types stelt je in staat om types te extraheren uit andere types.
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 vragen we TypeScript om het return type `R` van een functie te "infereren" en het terug te geven.
95~
96## Conclusie
97~
98Het beheersen van deze patronen stelt je in staat om bibliotheken en hulpprogramma's te schrijven die robuust zijn en een uitstekende ontwikkelaarservaring (DX) bieden. Het doel van geavanceerd TypeScript is niet complexiteit omwille van complexiteit, maar veiligheid en expressiviteit.
99~