TypeScript Academy · Lektion

Typisierte pipe- und flow-Utilities

Erstellen Sie Pipelines von links nach rechts mit präziser Inferenz.

Typisierte pipe- und flow-Utilities ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Von compose zu pipe

pipe führt einen Wert durch Funktionen von links nach rechts – in der Leserichtung, die die meisten Menschen bevorzugen. pipe(x, f, g) bedeutet g(f(x)).

Ein pipe mit zwei Schritten

Der einfachste pipe nimmt einen Wert und eine Funktion entgegen und gibt das Ergebnis zurück. Das Lesen von oben nach unten entspricht der Ausführungsreihenfolge.

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

Durch mehrere Funktionen weiterleiten

Ein pipe mit drei Argumenten wendet die Funktionen nacheinander an. Die Ausgabe jedes Schritts wird zur Eingabe des nächsten Schritts.

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

Lesen von links nach rechts

Im Gegensatz zu compose listet pipe die Schritte in ihrer Ausführungsreihenfolge auf. pipe(5, inc, dbl) erhöht zuerst und verdoppelt anschließend – genau wie geschrieben.

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

Warum Überladungen erforderlich sind

Verschiedene Aufrufstellen übergeben unterschiedliche Anzahlen von Funktionen. Damit jede Anzahl von Funktionen präzise typisiert werden kann, verwendet pipe Überladungssignaturen – eine für jede unterstützte Länge.

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);
}

Jede Überladung verkettet die Typen

Überladung zwei verkettet A -> B; Überladung drei verkettet A -> B -> C. Der Compiler wählt anhand der Anzahl übergebener Funktionen die passende Überladung aus.

Die Implementierung zur Laufzeit

Unter den Überladungen wendet ein einzelnes reduce jede Funktion nacheinander an. Die Signatur der Implementierung verwendet weit gefasste Typen; Aufrufer sehen die präzisen Überladungen.

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

Typänderungen innerhalb des pipes

Da jede Überladung Generics verkettet, kann ein pipe einen Wert durch mehrere Typen transformieren und dabei vollständig typgeprüft bleiben.

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

flow: pipe ohne Wert

flow funktioniert ähnlich wie pipe, nimmt aber nur die Funktionen entgegen und gibt eine neue Funktion zurück. Den Wert übergeben Sie später, was sich hervorragend für die Wiederverwendung eignet.

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 wendet Funktionen von links nach rechts auf einen Wert an; flow erstellt eine wiederverwendbare Funktion von links nach rechts; compose erstellt eine Funktion von rechts nach links. Wählen Sie je nach Leserichtung und Wiederverwendung.

Pipelines in der Praxis

Bibliotheken wie fp-ts und Effect bieten einen robusten, vollständig typisierten pipe mit vielen Überladungen. Wenn Sie selbst einen kleinen pipe erstellen, sehen Sie genau, wie die Typisierung funktioniert.

Kurztest

Kurzer Test zu dieser Lektion.

Zusammenfassung

pipe(x, f, g) = g(f(x)) wird von links nach rechts ausgeführt und verwendet Überladungssignaturen, um jede Anzahl von Funktionen präzise zu typisieren, mit einer einzigen Implementierung auf Basis von reduce. flow ist die Point-free-Variante und gibt eine wiederverwendbare Funktion zurück.

Häufig gestellte Fragen

Ist die Lektion „Typisierte pipe- und flow-Utilities“ kostenlos?

Ja — der vollständige Text von „Typisierte pipe- und flow-Utilities“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Typisierte pipe- und flow-Utilities“?

Erstellen Sie Pipelines von links nach rechts mit präziser Inferenz. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Typisierte pipe- und flow-Utilities“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy