0Pricing
TypeScript Academy · Lektion

Typkonstruktoren definieren

Kodieren Sie Typkonstruktoren als Interface-Nachschlagen.

Typkonstruktoren definieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Typkonstruktoren benennen

Die Kodierung beginnt damit, jedem Typkonstruktor einen eindeutigen String-Bezeichner namens URI zu geben. Die URI ist ein Tag, das überall dort für den Konstruktor steht, wo wir den Konstruktor nicht selbst übergeben können.

type ArrayURI = "Array";
type OptionURI = "Option";
// Each container gets a unique string tag

Eine Registry-Schnittstelle

Wir verwenden eine einzelne Schnittstelle, die jede URI auf den konkreten Typ abbildet, den sie für ein bestimmtes Argument A erzeugt. Diese Schnittstelle ist die Registry. Jeder Schlüssel ist eine URI, jeder Wert der aufgelöste Typ.

interface URItoKind<A> {
  Array: Array<A>;
  Option: A | null;
}
// URItoKind<number>["Array"] is number[]

Einen Konstruktor nachschlagen

Da die Registry nach URIs indiziert ist, wird die Anwendung eines Konstruktors zu einem indizierten Zugriff. Um „Array angewendet auf number“ zu erhalten, greifen Sie per Index auf die Registry zu.

type ArrayOfNumber = URItoKind<number>["Array"]; // number[]
type OptionOfString = URItoKind<string>["Option"]; // string | null

Die URIS-Union

Die Menge der gültigen Konstruktor-Tags besteht einfach aus den Schlüsseln der Registry. keyof URItoKind<unknown> liefert die Union aller registrierten URIs, die wir URIS nennen.

type URIS = keyof URItoKind<unknown>; // "Array" | "Option"

Declaration Merging erweitert die Registry

Eine leistungsfähige TypeScript-Funktion: Schnittstellen mit demselben Namen werden zusammengeführt. Bibliotheken nutzen dies, damit jedes Modul seinen eigenen Container zu URItoKind hinzufügen kann, ohne die ursprüngliche Definition zu bearbeiten.

interface URItoKind<A> {
  Tree: { value: A; children: Array<A> };
}
// Now URIS also includes "Tree"

Modulare Container

Dank des Zusammenführens registriert sich ein in einer Datei definierter Container global. Jeder, der ihn importiert, kann seine URI in generischen Abstraktionen verwenden. Genau so fügt fp-ts Option, Either, Task und weitere Container hinzu.

// file a.ts
interface URItoKind<A> { Either: { left: A } | { right: A } }
// file b.ts can now reference the "Either" URI

Ein Phantom-Träger

Um „welcher Konstruktor“ als Typ auf Werteebene weiterzugeben, tragen Instanzen ihre URI in einer Eigenschaft, häufig einem Phantomfeld. Das Feld enthält niemals einen echten Wert, sondern hält nur das Tag für das Typsystem fest.

interface HasURI<F extends URIS> {
  readonly _URI: F;
}
// _URI records which constructor an instance is for

URI und Argument verknüpfen

Eine Konstruktoranwendung benötigt zwei Dinge: die URI F und den Argumenttyp A. Wir kombinieren sie mithilfe eines Lookups, sodass (F, A) über die Registry in den konkreten Typ aufgelöst wird.

type Apply<F extends URIS, A> = URItoKind<A>[F];

type A = Apply<"Array", number>;  // number[]
type B = Apply<"Option", string>; // string | null

Warum Strings statt Konstruktoren

Wir verwenden Strings, weil TypeScript sie als Literaltypen speichern und vergleichen und eine Registry mit ihnen indizieren kann. Den Konstruktor Array können wir nicht als Typparameter speichern, aber den Literaltyp "Array" können wir speichern und nachschlagen.

type Tag = "Array";
type Resolved = URItoKind<boolean>[Tag]; // boolean[]

Der Lookup ist der entscheidende Schritt

Dieser indizierte Zugriff, URItoKind<A>[F], bildet das Herzstück der Kodierung. Er verwandelt die unmögliche Typanwendung F<A> in einen zulässigen Registry-Lookup. In der nächsten Lektion wird er als Kind<F, A> formalisiert.

type Kind<F extends URIS, A> = URItoKind<A>[F];

type X = Kind<"Array", number>; // number[]

Zusammenfassung des Aufbaus

Sie verfügen nun über die einzelnen Bausteine: URIs als Tags, eine URItoKind-Registry, die Tag und Argument auf einen konkreten Typ abbildet, URIS als Union der Tags und Declaration Merging zu ihrer Erweiterung. Das Indizieren der Registry simuliert eine Typanwendung.

// URItoKind = registry, URIS = valid tags,
// URItoKind<A>[F] = "apply constructor F to A"

Kurzer Test

Testen Sie Ihr Verständnis der Registry-Kodierung.

Zusammenfassung

Sie haben gelernt, Typkonstruktoren mit Strings zu kodieren.

  • Jeder Konstruktor erhält ein eindeutiges URI-Tag.
  • URItoKind<A> bildet Tags auf konkrete Typen ab.
  • URIS ist mithilfe von keyof die Union aller Tags.
  • Mit Declaration Merging können Module neue Container registrieren.

Als Nächstes: den Lookup als leichtgewichtiges Kind-Muster kapseln.

Häufig gestellte Fragen

Ist die Lektion „Typkonstruktoren definieren“ kostenlos?

Ja — der vollständige Text von „Typkonstruktoren definieren“ 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 „Typkonstruktoren definieren“?

Kodieren Sie Typkonstruktoren als Interface-Nachschlagen. 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 2 von 4.

Wie lange dauert die Lektion „Typkonstruktoren definieren“?

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

  1. Das HKT-Problem in TypeScript
  2. Typkonstruktoren definieren
  3. Das schlanke HKT-Muster
  4. Generische Funktoren und Mapper
← Zurück zu TypeScript Academy