TypeScript Academy · Lektion

Funktionskomposition mit Typen

Komponieren Sie Funktionen und bewahren Sie dabei Typsicherheit.

Funktionskomposition mit Typen ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Was ist Komposition?

Die Funktionskomposition verbindet kleine Funktionen zu einer größeren Funktion. compose(f, g) erzeugt eine Funktion, die zuerst g anwendet und das Ergebnis anschließend an f übergibt.

Die grundlegende Definition

Mathematisch gilt compose(f, g)(x) = f(g(x)). Die Funktionen werden von rechts nach links ausgeführt: Die Funktion ganz rechts wird zuerst ausgeführt.

const compose = (f: (n: number) => number, g: (n: number) => number) =>
  (x: number) => f(g(x));
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
console.log(compose(inc, dbl)(5)); // 11 (5*2 then +1)

Reihenfolge von rechts nach links

Die Reihenfolge ist entscheidend. compose(inc, dbl) verdoppelt zuerst und erhöht anschließend, während compose(dbl, inc) zuerst erhöht. Lesen Sie eine Komposition von innen nach außen.

console.log(compose(dbl, inc)(5)); // 12 (5+1 then *2)

Komposition mit Generics typisieren

Generics ermöglichen unterschiedliche Eingabe- und Ausgabetypen. g bildet A auf B ab, f bildet B auf C ab, und das Ergebnis bildet A auf C ab.

function compose<A, B, C>(f: (b: B) => C, g: (a: A) => B): (a: A) => C {
  return a => f(g(a));
}

Typen auf dem Weg ändern

Da die Generics die Kette A -> B -> C bilden, kann eine Komposition einen Wert durch mehrere Formen transformieren, zum Beispiel von einem String zu einer Zahl und wieder zu einem String.

const length = (s: string) => s.length;
const toStr = (n: number) => "len=" + n;
const describe = compose(toStr, length);
console.log(describe("hello")); // len=5

Die Typgrenze muss übereinstimmen

Die Ausgabe von g muss zur Eingabe von f passen. Wenn die Typen nicht übereinstimmen, weist der Compiler die Komposition zurück und erkennt Verdrahtungsfehler frühzeitig.

// compose(length, toStr) would error:
// toStr returns string, length expects string -> ok here,
// but mismatched pairs are flagged by the compiler.

Drei Funktionen kombinieren

Sie können Kompositionen verschachteln oder eine Variante mit drei Argumenten schreiben. Die Regel von rechts nach links gilt weiterhin für alle Varianten.

const compose3 = <A, B, C, D>(
  f: (c: C) => D, g: (b: B) => C, h: (a: A) => B
) => (a: A): D => f(g(h(a)));
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
const neg = (n: number) => -n;
console.log(compose3(neg, dbl, inc)(3)); // -8

Komposition erstellt Pipelines

Indem Sie kleine, reine Funktionen kombinieren, setzen Sie komplexe Transformationen deklarativ zusammen. Jeder einzelne Teil bleibt isoliert testbar.

const trim = (s: string) => s.trim();
const upper = (s: string) => s.toUpperCase();
const clean = compose(upper, trim);
console.log(clean("  hi ")); // HI

Warum sich reine Funktionen am besten kombinieren lassen

Komposition setzt voraus, dass jede Funktion nur von ihrer Eingabe abhängt. Reine Funktionen garantieren das. Daher ergibt ihre Komposition wieder eine vorhersagbare reine Funktion.

compose vs. pipe

compose wird von rechts nach links ausgeführt und entspricht der mathematischen Schreibweise. Viele bevorzugen jedoch die Leserichtung von links nach rechts – genau das bietet pipe, das als Nächstes behandelt wird.

Halten Sie die Teile klein

Komposition spielt ihre Stärken aus, wenn jede Funktion eine kleine, klar abgegrenzte Aufgabe erfüllt. Kleine, benannte und reine Schritte machen die zusammengesetzte Pipeline selbsterklärend und leicht umstellbar.

Kurztest

Kurzer Test zu dieser Lektion.

Zusammenfassung

compose(f, g)(x) = f(g(x)) wird von rechts nach links ausgeführt. Die generische Typisierung bildet die Kette A -> B -> C, sodass die Ausgabe von g zur Eingabe von f passen muss. Dadurch kann der Compiler die Pipeline aus kleinen, reinen Funktionen überprüfen.

Häufig gestellte Fragen

Ist die Lektion „Funktionskomposition mit Typen“ kostenlos?

Ja — der vollständige Text von „Funktionskomposition mit Typen“ 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 „Funktionskomposition mit Typen“?

Komponieren Sie Funktionen und bewahren Sie dabei Typsicherheit. 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 3 von 4.

Wie lange dauert die Lektion „Funktionskomposition mit Typen“?

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