5 Modèles TypeScript Avancés pour Ingénieurs Seniors

TypeScript 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.

1. Contraintes Génériques

Les génériques sont puissants, mais il faut parfois limiter ce qui peut être transmis. extends est votre ami ici.

interface HasId {
  id: string;
}

function getById<T extends HasId>(list: T[], id: string): T | undefined {
  return list.find((item) => item.id === id);
}

En nous assurant que T étend HasId, nous garantissons que l'accès à .id à l'intérieur de la fonction est sûr.

2. Types Conditionnels

Les 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.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

Un cas d'utilisation pratique consiste à filtrer les types d'une union :

type Diff<T, U> = T extends U ? never : T;
type NonNullable<T> = Diff<T, null | undefined>;

3. Types Mappés

Les types mappés vous permettent de créer de nouveaux types basés sur d'anciens en transformant les propriétés.

type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

interface User {
  name: string;
  age: number;
}

type ReadOnlyUser = ReadOnly<User>;

Vous pouvez même ajouter ou supprimer des modificateurs :

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

4. Types Littéraux de Modèle

Introduits dans TypeScript 4.1, ceux-ci vous permettent de manipuler directement les types de chaînes.

type World = 'world';
type Greeting = `hello ${World}`; // "hello world"

type Color = 'red' | 'blue';
type Quantity = 'light' | 'dark';

type Palette = `${Quantity}-${Color}`;
// "light-red" | "light-blue" | "dark-red" | "dark-blue"

C'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.

5. Le Mot-clé infer

Le mot-clé infer dans les types conditionnels vous permet d'extraire des types d'autres types.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function check(): boolean {
  return true;
}

type CheckReturn = ReturnType<typeof check>; // boolean

Ici, nous demandons à TypeScript d'"inférer" le type de retour R d'une fonction et de le renvoyer.

Conclusion

La 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é.