1~
2TypeScript har blivit industristandarden för storskalig webbutveckling. Medan de flesta utvecklare känner till grunderna med interfaces och typer, ligger den verkliga kraften i det avancerade typsystemet. Här är 5 mönster som kommer att särskilja dig som senior ingenjör.
3~
4## 1. Generic Constraints
5~
6Generics är kraftfulla, men ibland behöver du begränsa vad som kan skickas in. `extends` är din vän här.
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~
18Genom att säkerställa att `T` utökar `HasId`, garanterar vi att åtkomst till `.id` inuti funktionen är säker.
19~
20## 2. Conditional Types
21~
22Conditional types låter dig skapa icke-uniforma typmappningar. Syntaxen liknar den ternära operatorn 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~
31Ett praktiskt användningsfall är att filtrera bort typer från 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 låter dig skapa nya typer baserade på befintliga genom att transformera egenskaper.
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 till och med lägga till eller ta bort modifierare:
56~
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62~
63## 4. Template Literal Types
64~
65Introducerade i TypeScript 4.1, dessa låter dig manipulera strängtyper direkt.
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~
78Detta är otroligt användbart för att typa strängar som följer ett specifikt mönster, som CSS-klasser eller händelsenamn.
79~
80## 5. Nyckelordet `infer`
81~
82Nyckelordet `infer` inom conditional types låter dig extrahera typer från andra 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~
94Här ber vi TypeScript att "inferera" returtypen `R` av en funktion och returnera den.
95~
96## Slutsats
97~
98Att behärska dessa mönster gör det möjligt att skriva bibliotek och verktyg som är robusta och ger en utmärkt utvecklarupplevelse (DX). Målet med avancerad TypeScript är inte komplexitet för komplexitetens skull, utan säkerhet och uttrycksfullhet.
99~