TypeScript Academy · Lektion

Generische Funktoren und Mapper

Schreiben Sie auf beliebige Container generische map-Funktionen.

Lektion 4 von 413 Schritte

Generische Funktoren und Mapper 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.

Ein generischer Functor

Jetzt verwenden wir die Kodierung für ihren eigentlichen Zweck: ein generisches map, das mit jedem registrierten Container funktioniert. Die nach einer URI parametrisierte Functor-Schnittstelle deklariert eine Methode.

interface Functor<F extends URIS> {
  readonly URI: F;
  map<A, B>(fa: Kind<F, A>, f: (a: A) => B): Kind<F, B>;
}

Die Array-Instanz

Eine Instanz implementiert map für eine URI. Die Array-Instanz führt die Abbildung mit der integrierten Array-Methode aus. Ihr Kind<"Array", A> wird zu A[] aufgelöst.

const arrayFunctor: Functor<"Array"> = {
  URI: "Array",
  map: (fa, f) => fa.map(f)
};

Die Array-Instanz verwenden

Der Aufruf von map auf der Array-Instanz transformiert jedes Element und erhält dabei den Array-Containertyp.

const doubled = arrayFunctor.map([1, 2, 3], n => n * 2);
// doubled: number[] -> [2, 4, 6]

Der Option-Typ

Definieren Sie eine Option als Wert oder null und registrieren Sie sie. Ihr map wendet die Funktion nur an, wenn ein Wert vorhanden ist; andernfalls gibt es null weiter.

interface URItoKind<A> { Option: A | null }
type Option<A> = A | null;

Die Option-Instanz

Die Option-Instanz erhält den Option-Container: Eine Funktion wird auf den enthaltenen Wert angewendet, und ein null bleibt ein null.

const optionFunctor: Functor<"Option"> = {
  URI: "Option",
  map: (fa, f) => (fa === null ? null : f(fa))
};

Die Option-Instanz verwenden

Dieselbe map-Struktur funktioniert nun mit einem völlig anderen Container. Vorhandene Werte werden transformiert, fehlende Werte bleiben unverändert.

const a = optionFunctor.map(5, n => n + 1);    // 6
const b = optionFunctor.map(null, n => n + 1); // null

Eine Abstraktion, viele Container

Das ist der entscheidende Vorteil. arrayFunctor und optionFunctor verwenden dieselbe Functor-Schnittstelle. Code, der für Functor<F> geschrieben wurde, funktioniert ohne Änderungen mit beiden.

function bumpAll<F extends URIS>(
  F: Functor<F>,
  fa: Kind<F, number>
): Kind<F, number> {
  return F.map(fa, n => n + 1);
}

Die generische Funktion aufrufen

bumpAll weiß nicht und muss nicht wissen, welchen Container es erhält. Übergeben Sie die Instanz und die Daten; das Ergebnis behält den Containertyp bei.

const arr = bumpAll(arrayFunctor, [1, 2]); // number[] -> [2, 3]
const opt = bumpAll(optionFunctor, 9);     // number | null -> 10

Functor-Gesetze

Ein korrekter Functor befolgt zwei Gesetze: Die Abbildung der Identitätsfunktion verändert nichts, und zwei aufeinanderfolgende Abbildungen entsprechen der Abbildung ihrer Komposition. Sowohl die Array- als auch die Option-Instanz oben erfüllen diese Gesetze.

// map(fa, x => x) === fa
// map(map(fa, f), g) === map(fa, x => g(f(x)))

Weitere Instanzen hinzufügen

Da die Abstraktion offen ist, lassen sich neue Container durch das Registrieren einer URI und das Bereitstellen einer Instanz integrieren. Ein Tree, ein Result, ein Task: Jeder dieser Container kann mit demselben generischen Code abbildbar werden.

// Register URI, implement Functor<"Tree">,
// and bumpAll works on trees too - no edits to bumpAll

Warum das wichtig ist

Generische Functors sind der Einstiegspunkt zu funktionalen Abstraktionen in TypeScript: Applicatives, Monads und Traversals. Jede davon ist eine Schnittstelle über Kind<F, A> mit Instanzen pro Container. Sie verstehen nun die Mechanismen, die fp-ts und Effect ermöglichen.

interface Monad<F extends URIS> extends Functor<F> {
  of<A>(a: A): Kind<F, A>;
  chain<A, B>(fa: Kind<F, A>, f: (a: A) => Kind<F, B>): Kind<F, B>;
}

Kurzer Test

Testen Sie Ihr Verständnis generischer Functors.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben ein containergenerisches map geschrieben.

Functor<F> deklariert map über Kind<F, A>.
Array- und Option-Instanzen implementieren es für ihre URIs.
Generischer Code wie bumpAll funktioniert mit jedem registrierten Container.
Functor-Gesetze sorgen für korrektes Verhalten der Instanzen; darauf bauen umfangreichere Abstraktionen auf.

Kurs 24 als Nächstes: typsichere Parser erstellen.

Kostenlos starten

Lerne TypeScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 101
Lektionen: 352

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Generische Funktoren und Mapper“ kostenlos?

Ja — der vollständige Text von „Generische Funktoren und Mapper“ 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 „Generische Funktoren und Mapper“?

Schreiben Sie auf beliebige Container generische map-Funktionen. 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 „Generische Funktoren und Mapper“?

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