1~
2TypeScript er blevet industristandarden for storstilet webudvikling. Mens de fleste udviklere kender det grundlæggende om interfaces og typer, ligger den virkelige kraft i dets avancerede typesystem. Her er 5 mønstre, der vil adskille dig som seniorudvikler.
3~
4## 1. Generic Constraints
5~
6Generics er kraftfulde, men nogle gange har du brug for at begrænse, hvad der kan sendes ind. `extends` er din ven her.
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~
18Ved at sikre, at `T` udvider `HasId`, garanterer vi, at det er sikkert at tilgå `.id` inde i funktionen.
19~
20## 2. Conditional Types
21~
22Conditional Types giver dig mulighed for at oprette ikke-uniforme typemappings. Syntaksen ligner den ternære operator i 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~
31Et praktisk anvendelsestilfælde er at filtrere typer fra en 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 giver dig mulighed for at oprette nye typer baseret på gamle ved at transformere egenskaber.
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~
55Du kan endda tilføje eller fjerne modifikatorer:
56~
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62~
63## 4. Template Literal Types
64~
65Introduceret i TypeScript 4.1 giver disse dig mulighed for at manipulere strengtyper direkte.
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~
78Dette er utroligt nyttigt til at type strenge, der følger et bestemt mønster, som CSS-klasser eller hændelsesnavne.
79~
80## 5. Nøgleordet `infer`
81~
82Nøgleordet `infer` inden for conditional types giver dig mulighed for at udtrække typer fra andre typer.
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~
94Her beder vi TypeScript om at "udlede" returtypen `R` af en funktion og returnere den.
95~
96## Konklusion
97~
98At mestre disse mønstre giver dig mulighed for at skrive biblioteker og værktøjer, der er robuste og giver en fremragende udvikleroplevelse (DX). Målet med avanceret TypeScript er ikke kompleksitet for kompleksitetens skyld, men sikkerhed og udtryksfuldhed.
99~