TypeScript Academy · Lektion

En liten rout-parser på typnivå

Parsa rout-sökvägar till typade parameterobjekt.

Lektion 4 av 413 steg

En liten rout-parser på typnivå är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Målet

Vi bygger en route-parser som läser en sökväg som "users/:id/posts/:postId" och skapar ett typat params-objekt { id: string; postId: string }, helt vid kompilering. Detta är ett vanligt mönster i typade routrar.

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

Känna igen en parameter

Ett sökvägssegment är en parameter när det börjar med ":". Detta prefix matchas med en mallitteral, och parameternamnet efter kolonnet infereras.

Notation: I riktig TypeScript skrivs mallitteraltyper med backtick-avgränsade strängar som innehåller platshållare med dollar och klammerparenteser. I dessa kodexempel visas mönstret som Tpl<...>, där varje del listas i ordning. En mall med backticks som matchar det literala prefixet följt av Rest visas till exempel som 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

Dela sökvägen

Dela först upp routen i segment vid "/" genom att återanvända typen Split. Varje segment är sedan antingen en literal eller en 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']

Direkt mallrekursion

Det går också att parsa den råa strängen utan att först dela upp den, genom att matcha ett segment i taget. Matcha fram till nästa "/", hantera segmentet och rekurssera sedan över resten.

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

Hjälpfunktionen omvandlar ett enda segment till antingen ett objekt med en egenskap, om segmentet är en parameter, eller ett tomt objekt, om det är en literal.

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'>; // {}

Kombinera med intersektion

Varje segment bidrar med sina parametrar genom en intersektion. Tomma objekt försvinner i en intersektion, så endast verkliga parametrar finns kvar i den slutliga typen.

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

Följ parsningen

För "users/:id/posts/:postId":

Seg "users" -> {} , rekurssera över ":id/posts/:postId"
Seg ":id" -> { id: string }, rekurssera över "posts/:postId"
Seg "posts" -> {}, rekurssera över ":postId"
Seg ":postId" -> { postId: string }, basfall

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

Rensa resultatet

Intersektionen av objekt visas på ett svåröverskådligt sätt. En hjälpfunktion kallad "prettify" plattar ut den till en enda ren objekttyp med hjälp av en mapped type över dess nycklar.

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

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

Använda parsern

Använd den parsade typen i en funktion så att hanteraren får korrekt typade parametrar. Om fel nyckel skickas blir det ett kompileringsfel.

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

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

Vinsten med typade parametrar

Kompilatorn härleder nu params direkt från route-strängen. Om en parameter döps om i sökvägen uppdateras alla hanterares förväntade nycklar automatiskt. Inget manuellt interface och ingen skillnad mellan route och hanterare.

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

Utöka parsern

Denna mini-parser är grunden till en fullständig typad router. Det går att lägga till typade värden (numeriska parametrar), jokertecken och valfria segment genom att utöka hjälpfunktionen per segment med fler mallmönster. Strukturen med rekursiva mallar förblir densamma.

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

Snabbtest

Kontrollera Er förståelse av route-parsern.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har byggt en route-parser som fungerar vid kompilering.

Matcha varje segment med rekursiv inferens av mallitteraler.
Parametersegment (:name) blir { name: string }.
Literalsegment blir {} och försvinner i intersektionen.
Prettify plattar ut resultatet till rena params.

Nästa steg är kurs 25: typsäkerhet från ände till ände med tRPC.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”En liten rout-parser på typnivå” gratis?

Ja – hela texten till ”En liten rout-parser på typnivå” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”En liten rout-parser på typnivå”?

Parsa rout-sökvägar till typade parameterobjekt. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”En liten rout-parser på typnivå”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till TypeScript Academy