TypeScript Academy · Les

Een routeparser op typeniveau

Parse routepaden naar getypeerde parameterobjecten

Les 4 van 413 stappen

Een routeparser op typeniveau is een gratis TypeScript Academy-les op CoddyKit. Dit is les 4 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.

Het doel

We bouwen een routeparser die een pad zoals "users/:id/posts/:postId" leest en een getypeerd params-object { id: string; postId: string } oplevert, volledig tijdens het compileren. Dit is een echt patroon dat door getypeerde routers wordt gebruikt.

type Params = ParseRoute<"users/:id/posts/:postId">;
// Goal: { id: string; postId: string }

Een parameter herkennen

Een padsegment is een parameter als het met ":" begint. We matchen dat voorvoegsel met een template literal en leiden de parameternaam na de dubbele punt af.

Notatie: in echte TypeScript schrijft je template-literaltypen met door backticks begrensde tekenreeksen met dollar-accoladeplaatsen. In deze fragmenten geven we dat patroon weer als Tpl<...>, waarbij elk onderdeel in volgorde wordt opgesomd; zo verschijnt een backticksjabloon dat eerst het letterlijke voorvoegsel en daarna Rest matcht als Tpl<'prefix', infer Rest>.

type ParamName<S> = S extends Tpl<':', infer Name> ? Name : never;
// Tpl<...> denotes a backtick template literal type: a colon then Name

type X = ParamName<':id'>;   // 'id'
type Y = ParamName<'users'>; // never

Het pad splitsen

Splits de route eerst in segmenten op "/" en gebruik opnieuw het type Split. Elk segment is vervolgens een letterlijke waarde of een parameter.

type Split<S extends string, Sep extends string> =
  S extends Tpl<infer H, Sep, infer T> ? [H, ...Split<T, Sep>] : [S];
// Tpl<H, Sep, T> = a template literal type matching H, then Sep, then T

type Segs = Split<'users/:id', '/'>; // ['users', ':id']

Directe template-literalrecursie

We kunnen de onbewerkte tekenreeks ook parsen zonder die eerst te splitsen, door telkens één segment te matchen. Match tot aan het volgende "/", verwerk dat segment en pas daarna recursie toe op de rest.

type ParseRoute<S extends string> =
  S extends Tpl<infer Seg, '/', infer Rest>
    ? SegParam<Seg> & ParseRoute<Rest>
    : SegParam<S>;
// Tpl<Seg, '/', Rest> matches a segment, a slash, then the rest

Parameter per segment

De hulpfunctie zet één segment om in een object met één eigenschap (als het een parameter is) of in een leeg object (als het een letterlijke waarde is).

type SegParam<S extends string> =
  S extends Tpl<':', infer Name> ? { [K in Name]: string } : {};
// Tpl<':', Name> matches a colon followed by the param name

type X = SegParam<':id'>;   // { id: string }
type Y = SegParam<'posts'>; // {}

Combineren met een doorsnede

Elk segment draagt zijn parameters bij via een doorsnede. Lege objecten verdwijnen in een doorsnede, zodat alleen echte parameters in het uiteindelijke type overblijven.

type Params = ParseRoute<"users/:id/posts/:postId">;
// { id: string } & {} & { postId: string } & {}
// = { id: string; postId: string }

Het parseproces volgen

Voor "users/:id/posts/:postId":

Seg "users" -> {}, recursief op ":id/posts/:postId"
Seg ":id" -> { id: string }, recursief op "posts/:postId"
Seg "posts" -> {}, recursief op ":postId"
Seg ":postId" -> { postId: string }, basiscasus

type Final = { id: string } & { postId: string };

Het resultaat opschonen

De doorsnede van objecten wordt onoverzichtelijk weergegeven. Een hulpfunctie genaamd "prettify" maakt er één duidelijk objecttype van met een mapped type over de sleutels.

type Prettify<T> = { [K in keyof T]: T[K] } & {};

type Clean = Prettify<ParseRoute<"users/:id">>; // { id: string }

De parser gebruiken

Verwerk het geparseerde type in een functie, zodat de handler correct getypeerde parameters ontvangt. Als je de verkeerde sleutel doorgeeft, ontstaat er een compilatiefout.

declare function route<P extends string>(
  path: P,
  handler: (params: Prettify<ParseRoute<P>>) => void
): void;

route("users/:id", p => { const id: string = p.id; });

Voordeel van getypeerde parameters

De compiler leidt params nu rechtstreeks af uit de routetekenreeks. Hernoem een parameter in het pad en elke handler werkt automatisch de verwachte sleutels bij. Geen handmatige interface en geen verschil tussen route en handler.

route("users/:userId", p => {
  const u = p.userId; // ok
  // const x = p.id; // error: id does not exist
});

De parser uitbreiden

Deze kleine parser vormt de basis voor een volledig getypeerde router. Je kunt getypeerde waarden (numerieke parameters), jokertekens en optionele segmenten toevoegen door meer templatepatronen aan de hulpfunctie per segment toe te voegen. De structuur met recursieve templates blijft hetzelfde.

type SegParam2<S extends string> =
  S extends Tpl<':', infer N, '(number)'> ? { [K in N]: number }
  : S extends Tpl<':', infer N> ? { [K in N]: string }
  : {};
// Tpl<...> stands for a backtick template literal type pattern

Korte controle

Toets je begrip van de routeparser.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt een routeparser voor de compilertijd gebouwd.

Match elk segment met recursieve template-literalinferentie.
Parametersegmenten (:name) worden { name: string }.
Letterlijke segmenten worden {} en verdwijnen in de doorsnede.
Prettify maakt van het resultaat duidelijke params.

Volgende stap: cursus 25, end-to-end typeveiligheid met tRPC.

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Een routeparser op typeniveau” gratis?

Ja — de volledige tekst van “Een routeparser op typeniveau” 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 “Een routeparser op typeniveau”?

Parse routepaden naar getypeerde parameterobjecten 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 4 van 4.

Hoe lang duurt de les “Een routeparser op typeniveau”?

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

← Terug naar TypeScript Academy