TypeScript Academy · Leçon

Utilitaires pipe et flow typés

Créer des pipelines de gauche à droite avec une inférence précise.

Leçon 4 sur 413 étapes

Utilitaires pipe et flow typés est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

De compose à pipe

pipe fait circuler une valeur à travers des fonctions de gauche à droite, l’ordre de lecture préféré de la plupart des gens. pipe(x, f, g) signifie g(f(x)).

Un pipe en deux étapes

Le pipe le plus simple prend une valeur et une fonction, puis renvoie le résultat. La lecture de haut en bas correspond à l’ordre d’exécution.

const pipe2 = <A, B>(a: A, f: (a: A) => B): B => f(a);
console.log(pipe2(5, n => n + 1)); // 6

Faire circuler une valeur à travers plusieurs fonctions

Un pipe à trois arguments applique les fonctions successivement. La sortie de chaque étape devient l’entrée de l’étape suivante.

function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C {
  return g(f(a));
}
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
console.log(pipe(5, inc, dbl)); // 12

Lecture de gauche à droite

Contrairement à compose, pipe énumère les étapes dans leur ordre d’exécution. pipe(5, inc, dbl) incrémente puis double, exactement comme indiqué.

console.log(pipe(5, dbl, inc)); // 11 (double then inc)

Pourquoi les surcharges sont nécessaires

Différents points d’appel transmettent des nombres différents de fonctions. Pour typer précisément chaque cardinalité, pipe utilise des signatures de surcharge, une par longueur prise en charge.

function pipe<A, B>(a: A, f: (a: A) => B): B;
function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C;
function pipe(a: unknown, ...fns: Function[]): unknown {
  return fns.reduce((v, fn) => fn(v), a);
}

Chaque surcharge enchaîne les types

La surcharge à deux fonctions enchaîne A -> B ; celle à trois fonctions enchaîne A -> B -> C. Le compilateur choisit la surcharge correspondante en fonction du nombre de fonctions transmises.

L’implémentation à l’exécution

Sous les surcharges, un seul reduce applique chaque fonction à tour de rôle. La signature de l’implémentation utilise des types peu contraints ; les appelants voient les surcharges précises.

function pipe(a: any, ...fns: Array<(x: any) => any>): any {
  return fns.reduce((acc, fn) => fn(acc), a);
}
console.log(pipe("  hi ", s => s.trim(), s => s.toUpperCase())); // HI

Les changements de types le long du pipe

Comme chaque surcharge enchaîne des génériques, un pipe peut transformer une valeur en lui faisant traverser plusieurs types tout en restant entièrement vérifié par le système de types.

const out = pipe("hello", s => s.length, n => n > 3);
console.log(out); // true (string -> number -> boolean)

flow : pipe sans la valeur

flow ressemble à pipe, mais ne prend que les fonctions et renvoie une nouvelle fonction. Vous fournissez la valeur plus tard, ce qui est idéal pour la réutilisation.

const flow = <A, B, C>(f: (a: A) => B, g: (b: B) => C) =>
  (a: A): C => g(f(a));
const process = flow((n: number) => n + 1, (n: number) => n * 2);
console.log(process(5)); // 12

pipe vs flow vs compose

pipe applique les fonctions à une valeur de gauche à droite ; flow construit une fonction réutilisable de gauche à droite ; compose construit une fonction de droite à gauche. Faites votre choix selon l’ordre de lecture et le besoin de réutilisation.

Des chaînes de traitement pratiques

Des bibliothèques comme fp-ts et Effect fournissent un pipe robuste et entièrement typé, avec de nombreuses surcharges. En construire un petit vous-même montre précisément le fonctionnement du typage.

Vérification rapide

Vérification rapide de cette leçon.

Réponds-y dans la leçon interactive

Récapitulatif

pipe(x, f, g) = g(f(x)) s’exécute de gauche à droite et utilise des signatures de surcharge pour typer précisément chaque cardinalité, avec une seule implémentation utilisant reduce. flow est la variante sans valeur initiale qui renvoie une fonction réutilisable.

Gratuit pour commencer

Apprends TypeScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 101
Leçons: 352

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Utilitaires pipe et flow typés » est-elle gratuite ?

Oui — le texte complet de « Utilitaires pipe et flow typés » 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 « Utilitaires pipe et flow typés » ?

Créer des pipelines de gauche à droite avec une inférence précise. 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 4 sur 4.

Combien de temps prend la leçon « Utilitaires pipe et flow typés » ?

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