TypeScript Academy · Lektion

Strukturierte Strings modellieren

Erzwingen Sie Formate wie Eventnamen und Routenpfade.

Strukturierte Strings modellieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

String-Formate erzwingen

Viele Zeichenketten in echten Anwendungen folgen einer Struktur: Namen von Event-Handlern, API-Routen oder CSS-Variablen. Mit Template-Literal-Typen können Sie diese Formate modellieren, sodass der Compiler sie erzwingt.

Namen von Event-Handlern modellieren

Ein Handlername besteht oft aus on und einem großgeschriebenen Ereignisnamen. Mit dem intrinsischen Hilfstyp Capitalize innerhalb eines Templates wird das Ereignis 'click' dem Handlernamen 'onClick' zugeordnet.

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

Warum Capitalize hier wichtig ist

Ohne Capitalize würde das Template 'onclick' ergeben. Der intrinsische Typ schreibt das erste Zeichen des Literals groß und erzeugt dadurch idiomatische camelCase-Namen für Event-Handler.

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

Eine Handler-Map erzeugen

Kombinieren Sie Template-Literal-Schlüssel mit einem Mapped Type, um einen Objekttyp für Handler zu erzeugen — eine typisierte Funktion pro Ereignis mit korrekt geschriebenen Namen.

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

Routenpfade modellieren

API-Routen haben eine gemeinsame Struktur aus einem führenden Schrägstrich, einer Ressource und einem ID-Segment. Ein Template, das festen Text mit einem Platzhalter kombiniert, erfasst gültige Pfade.

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

Parametrisierte Pfade

Fügen Sie einen Platzhalter für eine dynamische ID hinzu. Ein Template aus Schrägstrich, Ressource, Schrägstrich und anschließendem generischem ID-Segment modelliert Pfade wie einen users-Pfad gefolgt von einer numerischen ID.

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

Formate zur Compile-Zeit erzwingen

Indem Sie einen Parameter als Template-Literal-Typ typisieren, weisen Sie jede Zeichenkette zurück, die nicht der Struktur entspricht — eine Schutzmaßnahme gegen fehlerhafte Routen oder Schlüssel.

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

CSS-Variablennamen zusammensetzen

CSS-Custom-Properties folgen einem Benennungsschema. Ein Template mit zwei führenden Bindestrichen und einem Token-Platzhalter modelliert Namen wie eine Farb-Token-Variable.

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

Mit Inferenz aufteilen

Template-Literal-Typen können auch analysieren: Mit bedingten Typen und infer extrahieren Sie Teile einer strukturierten Zeichenkette auf Typebene — beispielsweise die Methode aus einer Endpoint-Zeichenkette.

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

Nutzen in der Praxis

Typen für strukturierte Zeichenketten fangen ganze Fehlerklassen ab: einen falsch geschriebenen Handlernamen, eine unbekannte Route oder ein falsches CSS-Token — all das wird zu einem Compile-Fehler statt zu einem unbemerkten Fehler zur Laufzeit.

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

Lesbar halten

So leistungsfähig sie sind, beeinträchtigen tief verschachtelte Template-Typen die Lesbarkeit. Benennen Sie Zwischenaliase für Typen, damit die Struktur für die nächste lesende Person klar bleibt.

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

Kurzer Check

Testen Sie Ihr Verständnis der Modellierung strukturierter Zeichenketten.

Zusammenfassung

Template-Literal-Typen modellieren strukturierte Zeichenketten — etwa Handlernamen (on + Capitalize eines Ereignisses), Routenpfade und CSS-Variablen — und erzwingen diese Formate zur Compile-Zeit. In Kombination mit Mapped Types erzeugen sie Handler-Maps; zusammen mit bedingten Typen und infer können sie Zeichenketten analysieren. Benennen Sie Zwischenaliase, damit komplexe Muster lesbar bleiben.

Häufig gestellte Fragen

Ist die Lektion „Strukturierte Strings modellieren“ kostenlos?

Ja — der vollständige Text von „Strukturierte Strings modellieren“ 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 „Strukturierte Strings modellieren“?

Erzwingen Sie Formate wie Eventnamen und Routenpfade. 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 2 von 4.

Wie lange dauert die Lektion „Strukturierte Strings modellieren“?

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