TypeScript Academy · Leçon

Interfaces fluides avec des types

Enchaîner des méthodes tout en suivant l’état accumulé dans les types.

Interfaces fluides avec des types est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Suivi des éléments définis

Un constructeur classique vous permet d’appeler build() à tout moment, même si des champs obligatoires manquent. Nous pouvons faire mieux en suivant l’état accumulé dans le système de types à l’aide d’un paramètre de type générique.

Un paramètre de type d’état

Nous attribuons au constructeur un type générique S qui enregistre les clés déjà fournies. À chaque exécution d’une méthode, nous élargissons S pour y inclure une nouvelle clé.

class Builder<S> {
  // S is a record of keys set so far, e.g. {} or { url: string }
  private data: Record<string, unknown> = {};
}

Chaque méthode ajoute une clé

Un accesseur renvoie un nouveau constructeur typé dont le S inclut la clé qui vient d’être ajoutée. À l’exécution, la valeur est enregistrée ; le type est élargi en conséquence.

  set<K extends string, V>(key: K, value: V): Builder<S & Record<K, V>> {
    this.data[key] = value;
    return this as unknown as Builder<S & Record<K, V>>;
  }

L’astuce de l’intersection

L’expression S & Record<K, V> intersecte l’état précédent avec la nouvelle clé. Après deux appels, le type connaît précisément les deux clés.

type Empty = {};
type AfterUrl = Empty & Record<"url", string>;
type AfterBoth = AfterUrl & Record<"method", string>;
// AfterBoth = { url: string; method: string }

Un constructeur fluide concret

Ici, un constructeur de requête transmet sa forme accumulée à chaque appel. Le compilateur sait toujours exactement quels champs existent.

class Req<S> {
  private d: Record<string, unknown> = {};
  url(u: string): Req<S & { url: string }> {
    this.d.url = u; return this as any;
  }
  method(m: string): Req<S & { method: string }> {
    this.d.method = m; return this as any;
  }
}

Le type s’enrichit au fil de la chaîne

Chaque appel de la chaîne produit un type de constructeur plus précis. En survolant le résultat dans un éditeur, vous pouvez voir l’état accumulé.

const partial = new Req<{}>().url("/x");
// type: Req<{ url: string }>
const full = partial.method("POST");
// type: Req<{ url: string; method: string }>

Pourquoi suivre l’état ?

Une fois que le type contient l’ensemble des clés fournies, nous pouvons ensuite contraindre build() afin qu’il ne soit compilé que lorsque les clés obligatoires sont présentes. Le paramètre d’état constitue le fondement de cette garantie.

Lire la forme accumulée

Vous pouvez extraire la forme accumulée pour l’examiner. Cela confirme que le type du constructeur correspond exactement à ce qui a été configuré.

type StateOf<T> = T extends Req<infer S> ? S : never;
type S1 = StateOf<Req<{ url: string }>>; // { url: string }

L’exécution reste simple

Toute la subtilité réside dans les types. À l’exécution, chaque accesseur se contente d’enregistrer une valeur dans un objet. Les conversions (as any) relient l’objet d’exécution au type plus riche utilisé lors de la compilation.

const r = new Req<{}>().url("/users").method("GET");
console.log("configured url and method");

L’état générique comme registre

Considérez S comme un registre de ce qui a été défini. Les méthodes y ajoutent des entrées ; l’étape de construction peut ensuite consulter ce registre pour décider si la construction est autorisée.

Compromis

Le suivi de l’état au niveau des types fournit des indications précises dans l’IDE et empêche les constructions incomplètes, au prix de quelques conversions et de génériques plus avancés. Cela en vaut la peine pour les API utilisées par de nombreuses personnes.

Vérification rapide

Vérification rapide de cette leçon.

Récapitulatif

Un constructeur typé fluide transporte un paramètre d’état générique S. Chaque accesseur intersecte S avec la nouvelle clé (S & Record<K, V>) et renvoie un constructeur plus précis, ce qui fournit au compilateur un registre précis des champs configurés.

Questions Fréquemment Posées

La leçon « Interfaces fluides avec des types » est-elle gratuite ?

Oui — le texte complet de « Interfaces fluides avec des types » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Interfaces fluides avec des types » ?

Enchaîner des méthodes tout en suivant l’état accumulé dans les types. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Interfaces fluides avec des types » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à TypeScript Academy