TypeScript Academy · Lektion

Ein kleiner Routenparser auf Typebene

Parsen Sie Routenpfade in typisierte Parameterobjekte.

Ein kleiner Routenparser auf Typebene 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.

Das Ziel

Wir erstellen einen Routenparser, der einen Pfad wie "users/:id/posts/:postId" liest und ein typisiertes params-Objekt { id: string; postId: string } erzeugt – vollständig zur Compilezeit. Dies ist ein gängiges Muster in typisierten Routern.

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

Einen Parameter erkennen

Ein Pfadsegment ist ein Parameter, wenn es mit ":" beginnt. Wir erkennen dieses Präfix mit einem Template-Literal und inferieren den Parameternamen nach dem Doppelpunkt.

Notation: In echtem TypeScript werden Template-Literal-Typen mit durch Backticks begrenzten Zeichenketten geschrieben, die Dollar-Brace-Platzhalter enthalten. In diesen Ausschnitten zeigen wir dieses Muster als Tpl<...> und listen die einzelnen Teile der Reihe nach auf. Eine Backtick-Vorlage, die zuerst dem Literalpräfix und anschließend Rest entspricht, erscheint beispielsweise 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

Den Pfad aufteilen

Teilen Sie die Route zunächst mithilfe des Typs Split an "/" in Segmente auf. Jedes Segment ist anschließend entweder ein Literal oder ein 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']

Direkte Template-Rekursion

Wir können auch die ursprüngliche Zeichenkette parsen, ohne sie vorher aufzuteilen, indem wir jeweils ein Segment erkennen. Erkennen Sie alles bis zum nächsten "/", behandeln Sie dieses Segment und wenden Sie die Rekursion auf den Rest an.

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 pro Segment

Der Hilfstyp wandelt ein einzelnes Segment entweder in ein Objekt mit einer Eigenschaft um, wenn es ein Parameter ist, oder in ein leeres Objekt, wenn es ein Literal ist.

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

Mit Intersection kombinieren

Jedes Segment steuert seine Parameter über eine Intersection bei. Leere Objekte verschwinden in einer Intersection, sodass im finalen Typ nur echte Parameter übrig bleiben.

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

Das Parsing nachvollziehen

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

Segment „users“ -> {} , Rekursion auf „:id/posts/:postId“
Segment „:id“ -> { id: string }, Rekursion auf „posts/:postId“
Segment „posts“ -> {}, Rekursion auf „:postId“
Segment „:postId“ -> { postId: string }, Basisfall

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

Das Ergebnis bereinigen

Die Darstellung von Objekt-Intersections ist unübersichtlich. Ein „Prettify“-Hilfstyp flacht sie mithilfe eines Mapped Types über ihre Schlüssel zu einem einzelnen, übersichtlichen Objekttyp ab.

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

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

Den Parser verwenden

Übergeben Sie den geparsten Typ an eine Funktion, damit der Handler korrekt typisierte params erhält. Die Übergabe des falschen Schlüssels führt zu einem Compilerfehler.

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

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

Der Vorteil typisierter Parameter

Der Compiler leitet params nun direkt aus der Route selbst ab. Wenn Sie einen Parameter im Pfad umbenennen, aktualisiert jeder Handler automatisch seine erwarteten Schlüssel. Keine manuelle Schnittstelle und keine Abweichung zwischen Route und Handler.

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

Den Parser erweitern

Dieser kleine Parser ist der Ausgangspunkt für einen vollständigen typisierten Router. Sie können typisierte Werte (Zahlenparameter), Wildcards und optionale Segmente hinzufügen, indem Sie den Hilfstyp pro Segment um weitere Template-Muster ergänzen. Die Struktur mit rekursiven Templates bleibt gleich.

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

Wissenscheck

Testen Sie Ihr Verständnis des Routenparsers.

Zusammenfassung

Sie haben einen Routenparser zur Compilezeit erstellt.

Erkennen Sie jedes Segment mithilfe rekursiver Template-Literal-Inferenz.
Parametersегmente (:name) werden zu { name: string }.
Literal-Segmente werden zu {} und verschwinden in der Intersection.
Prettify flacht das Ergebnis zu übersichtlichen params ab.

Als Nächstes in Kurs 25: typsichere Entwicklung durchgängig mit tRPC.

Häufig gestellte Fragen

Ist die Lektion „Ein kleiner Routenparser auf Typebene“ kostenlos?

Ja — der vollständige Text von „Ein kleiner Routenparser auf Typebene“ 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 „Ein kleiner Routenparser auf Typebene“?

Parsen Sie Routenpfade in typisierte Parameterobjekte. 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 „Ein kleiner Routenparser auf Typebene“?

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