TypeScript Academy · Les

Typeconstructors definiëren

Codeer typeconstructors als interface-opzoekingen

Les 2 van 413 stappen

Typeconstructors definiëren is een gratis TypeScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

Typeconstructors benoemen

De codering begint door elke typeconstructor een unieke tekenreeksidentifier te geven die URI wordt genoemd. De URI is een label dat overal voor de constructor staat waar we de constructor zelf niet kunnen doorgeven.

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

Een registerinterface

We houden één interface bij die elke URI koppelt aan het concrete type dat deze voor een bepaald argument A oplevert. Deze interface is het register. Elke sleutel is een URI; elke waarde is het opgeloste type.

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

Een constructor opzoeken

Omdat het register op URI's is geïndexeerd, wordt het toepassen van een constructor een geïndexeerde toegang. Om "Array toegepast op number" te krijgen, indexeer je het register.

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

De URIS-unie

De verzameling geldige constructorlabels bestaat gewoon uit de sleutels van het register. keyof URItoKind<unknown> geeft de unie van alle geregistreerde URI's, die we URIS noemen.

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

Declaraties samenvoegen breidt het register uit

Een krachtige functie van TypeScript: interfaces met dezelfde naam worden samengevoegd. Bibliotheken gebruiken dit zodat elke module zijn eigen container aan URItoKind kan toevoegen zonder de oorspronkelijke definitie te bewerken.

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

Modulaire containers

Dankzij het samenvoegen registreert een container die in één bestand is gedefinieerd zichzelf globaal. Iedereen die de container importeert, kan de URI ervan in generieke abstracties gebruiken. Dit is precies hoe fp-ts Option, Either, Task en meer toevoegt.

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

Een fantoomdrager

Om als type op waardenniveau door te geven "welke constructor" het is, bevatten instanties hun URI in een eigenschap, vaak een fantoomveld. Het veld bevat nooit een echte waarde; het legt alleen het label vast voor het typesysteem.

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

URI met argument combineren

Een constructortoepassing heeft twee dingen nodig: de URI F en het argumenttype A. We combineren deze met een opzoeking, zodat (F, A) via het register wordt omgezet in het concrete type.

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

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

Waarom tekenreeksen en geen constructors

We gebruiken tekenreeksen omdat TypeScript ze als letterlijke typen kan opslaan en vergelijken en er een register mee kan indexeren. We kunnen de constructor Array niet als typeparameter opslaan, maar wel de letterlijke tekenreeks "Array" opslaan en opzoeken.

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

De opzoeking is de belangrijkste stap

Deze geïndexeerde toegang, URItoKind<A>[F], vormt het hart van de codering. Hiermee verander je de onmogelijke type-toepassing F<A> in een legale registeropzoeking. In de volgende les formaliseren we dit als Kind<F, A>.

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

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

Samenvatting van de opzet

Je hebt nu alle onderdelen: URI's als labels, een URItoKind-register dat een label plus argument aan een concreet type koppelt, URIS als unie van de labels en het samenvoegen van declaraties om dit uit te breiden. Door het register te indexeren simuleer je het toepassen van een type.

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

Snelle controle

Test je begrip van de registercodering.

Samenvatting

Je hebt geleerd hoe je typeconstructors met tekenreeksen codeert.

  • Elke constructor krijgt een uniek URI-label.
  • URItoKind<A> koppelt labels aan concrete typen.
  • URIS is via keyof de unie van alle labels.
  • Door declaraties samen te voegen kunnen modules nieuwe containers registreren.

Hierna: de opzoeking verpakken in het lichtgewicht Kind-patroon.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
101
Lessen
352

Veelgestelde vragen

Is de les “Typeconstructors definiëren” gratis?

Ja — de volledige tekst van “Typeconstructors definiëren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Typeconstructors definiëren”?

Codeer typeconstructors als interface-opzoekingen Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Typeconstructors definiëren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Het HKT-probleem in TypeScript
  2. Typeconstructors definiëren
  3. Het lichtgewicht HKT-patroon
  4. Generieke functors en mappers
← Terug naar TypeScript Academy