1~
2TypeScript est devenu la norme de l'industrie pour le développement web à grande échelle. Alors que la plupart des développeurs connaissent les bases des interfaces et des types, la véritable puissance réside dans son système de types avancé. Voici 5 modèles qui vous distingueront en tant qu'ingénieur senior.
3~
4## 1. Contraintes Génériques
5~
6Les génériques sont puissants, mais il faut parfois limiter ce qui peut être transmis. `extends` est votre ami ici.
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~
18En nous assurant que `T` étend `HasId`, nous garantissons que l'accès à `.id` à l'intérieur de la fonction est sûr.
19~
20## 2. Types Conditionnels
21~
22Les types conditionnels vous permettent de créer des mappages de types non uniformes. La syntaxe est similaire à celle de l'opérateur ternaire en 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~
31Un cas d'utilisation pratique consiste à filtrer les types d'une union :
32~
33```typescript
34type Diff<T, U> = T extends U ? never : T;
35type NonNullable<T> = Diff<T, null | undefined>;
36```
37~
38## 3. Types Mappés
39~
40Les types mappés vous permettent de créer de nouveaux types basés sur d'anciens en transformant les propriétés.
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~
55Vous pouvez même ajouter ou supprimer des modificateurs :
56~
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62~
63## 4. Types Littéraux de Modèle
64~
65Introduits dans TypeScript 4.1, ceux-ci vous permettent de manipuler directement les types de chaînes.
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~
78C'est incroyablement utile pour typer des chaînes qui suivent un modèle spécifique, comme des classes CSS ou des noms d'événements.
79~
80## 5. Le Mot-clé `infer`
81~
82Le mot-clé `infer` dans les types conditionnels vous permet d'extraire des types d'autres 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~
94Ici, nous demandons à TypeScript d'"inférer" le type de retour `R` d'une fonction et de le renvoyer.
95~
96## Conclusion
97~
98La maîtrise de ces modèles vous permet d'écrire des bibliothèques et des utilitaires robustes et offrant une excellente expérience développeur (DX). L'objectif du TypeScript avancé n'est pas la complexité pour la complexité, mais la sécurité et l'expressivité.
99~