TypeScript Academy · Lektion

Parsen mit Template-Literals

Extrahieren Sie mit infer strukturierte Daten aus Strings.

Parsen mit Template-Literals ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Von der Aufteilung zur Struktur

Beim Aufteilen entsteht ein Tupel aus Teilen. Parsen geht weiter: Es extrahiert benannte, strukturierte Daten aus einem Stringtyp. Dazu verwenden wir Template-Literal-Muster mit mehreren infer-Variablen, um die gewünschten Teile herauszulösen.

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 KeyValue<S> =
  S extends Tpl<infer K, '=', infer V> ? { key: K; value: V } : never;
// Tpl<K, '=', V> matches K, an equals sign, then V

type X = KeyValue<'name=alice'>; // { key: 'name'; value: 'alice' }

Mehrere Inferenzstellen

Ein einzelnes Muster kann mehrere Felder gleichzeitig erfassen. Um "GET /users" zu parsen, inferieren Sie Methode und Pfad in einem einzigen Conditional Type.

type Request<S> =
  S extends Tpl<infer Method, ' ', infer Path>
    ? { method: Method; path: Path }
    : never;
// Tpl<Method, ' ', Path> matches the method, a space, then the path

type X = Request<'GET /users'>; // { method: 'GET'; path: '/users' }

Inferierte Teile einschränken

Sie können eine inferierte Variable inline mit extends einschränken, sodass sie nur bestimmten Formen entspricht. Hier muss die Methode ein bekanntes Verb sein.

type Method = 'GET' | 'POST';
type Parse<S> =
  S extends Tpl<(infer M extends Method), ' ', infer P>
    ? { method: M; path: P }
    : never;
// the inferred M is constrained to Method inside the template pattern

type X = Parse<'POST /x'>; // { method: 'POST'; path: '/x' }

Schlüssel-Wert-Paare parsen

Kombinieren Sie Aufteilen und Parsen: Teilen Sie einen Query-String in Paare auf und parsen Sie anschließend jedes Paar in einen Schlüssel und einen Wert. Das Ergebnis ist ein Tupel aus strukturierten Einträgen.

type Pair<S> =
  S extends Tpl<infer K, '=', infer V> ? [K, V] : [S, ''];
// Tpl<K, '=', V> splits a 'key=value' string literal type

type X = Pair<'page=2'>; // ['page', '2']

Ein Objekt aus Paaren erstellen

Überführen Sie ein Tupel aus Schlüssel-Wert-Paaren mithilfe eines Accumulators aus Mapped Type und Intersection in einen Objekttyp. Jedes Paar fügt eine Eigenschaft hinzu.

type FromPairs<T extends [string, string][]> =
  T extends [[infer K extends string, infer V], ...infer R extends [string, string][]]
    ? { [P in K]: V } & FromPairs<R>
    : {};

type X = FromPairs<[["a", "1"], ["b", "2"]]>; // { a: "1" } & { b: "2" }

Einen Query-String parsen

Setzen Sie alles zusammen: Teilen Sie an "&" auf, parsen Sie jedes Teilstück an "=" und erstellen Sie anschließend das Objekt. Der Compiler kennt nun die exakten Schlüssel eines Stringliteral-Query-Strings.

type ParseQuery<S extends string> =
  FromPairs<{ [I in keyof SplitAmp<S>]: Pair<SplitAmp<S>[I] & string> }>;
// where SplitAmp splits on "&" (from previous lesson)

Zahlen extrahieren

Inferierte Teile sind immer Stringliteral-Typen. Um einen Teil als Zahl zu behandeln, prüfen Sie, ob er einem numerischen Muster entspricht, oder bilden ihn über eine Einschränkung auf Ziffern ab. Der Wert bleibt ein Literaltyp.

type IsNumeric<S extends string> =
  S extends Tpl<number> ? true : false;
// Tpl<number> is a template literal type that matches any numeric string

type X = IsNumeric<'42'>; // true
type Y = IsNumeric<'4a'>; // false

Optionale Segmente

Verwenden Sie eine Union aus Mustern, um optionale Teile zu behandeln. Versuchen Sie zuerst das umfangreichere Muster und greifen Sie auf das einfachere zurück, wenn es nicht passt.

type ParsePath<S> =
  S extends Tpl<infer Base, '?', infer Query>
    ? { base: Base; query: Query }
    : { base: S; query: '' };
// Tpl<Base, '?', Query> matches an optional query after a question mark

type X = ParsePath<'/x?a=1'>; // { base: '/x'; query: 'a=1' }

Leerraum und Sonderfälle

Echte Zeichenketten enthalten überflüssige Leerzeichen. Kombinieren Sie Ihren Parser mit Trim aus der vorherigen Lektion, damit führender und nachfolgender Leerraum die extrahierten Felder nicht verfälscht.

type CleanKey<S extends string> = Trim<S>;
// Apply Trim to each inferred segment before using it

Warum das so leistungsfähig ist

Das Parsen mit Template-Literals ermöglicht es dem Compiler, Formate zu verstehen: Datumsangaben, Routen, Umgebungsvariablen-Schlüssel und SQL-Fragmente. Fehlerhafte Zeichenketten werden zu Compilerfehlern, und nachgelagerte Typen können von der geparsten Struktur abhängen. Das Stringliteral wird zu einem typisierten Wert.

type Event<S> =
  S extends Tpl<infer Domain, ':', infer Action>
    ? { domain: Domain; action: Action }
    : never;
// Tpl<Domain, ':', Action> matches 'domain:action'
type X = Event<'user:created'>; // { domain: 'user'; action: 'created' }

Parser kombinieren

Genau wie Kombinatoren auf Wertebene lassen sich auch Parser auf Typebene kombinieren. Teilen Sie zunächst auf, parsen Sie dann jedes Teilstück und setzen Sie anschließend ein Objekt zusammen. Jeder Schritt ist ein kleiner Conditional Type; gemeinsam bilden sie einen vollständigen, typisierten Parser.

// Split -> Pair -> FromPairs is a parser pipeline at the type level

Wissenscheck

Testen Sie Ihr Verständnis für das Parsen mit Template-Literals.

Zusammenfassung

Sie haben strukturierte Daten aus Stringtypen extrahiert.

Mehrere infer-Stellen erfassen benannte Felder in einem einzigen Muster.
Inferierte Teile können inline mit extends eingeschränkt werden.
Split, Pair und FromPairs lassen sich zu einem Query-Parser kombinieren.
Trim und numerische Prüfungen behandeln Sonderfälle.

Als Nächstes: ein vollständiger kleiner Routenparser.

Häufig gestellte Fragen

Ist die Lektion „Parsen mit Template-Literals“ kostenlos?

Ja — der vollständige Text von „Parsen mit Template-Literals“ 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 „Parsen mit Template-Literals“?

Extrahieren Sie mit infer strukturierte Daten aus Strings. 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 3 von 4.

Wie lange dauert die Lektion „Parsen mit Template-Literals“?

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