Grundlagen der Template-Literal-Typen
Erstellen Sie Stringtypen aus Unions und Platzhaltern.
Grundlagen der Template-Literal-Typen ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Strings auf Typebene
Template-Literal-Typen erstellen neue String-Literal-Typen, indem sie andere Stringtypen kombinieren. Sie verwenden dieselbe Syntax mit Backticks und Platzhaltern wie Template-Strings zur Laufzeit, arbeiten aber ausschließlich auf Typebene.
Ein einfacher Template-Literal-Typ
Stellen Sie sich einen Typalias Greeting vor, der als Template-Literal den Text Hello, gefolgt von einem Platzhalter für den Typ Name enthält. Wenn Name das Literal 'Ada' ist, ist Greeting der Literaltyp 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)Platzhalter binden andere Typen ein
In den Platzhalter können Sie jeden stringähnlichen Typ einsetzen: ein Literal, einen Typparameter oder eine Union. TypeScript setzt ihn in den umgebenden Text ein, um einen neuen Literaltyp zu bilden.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)Das Kombinieren von Unions vervielfacht Varianten
Wenn ein Platzhalter eine Union enthält, wird das Template über jedes ihrer Elemente erweitert. Ein Template, das 'a' | 'b' mit einem festen Suffix kombiniert, erzeugt eine Union aus jeder Kombination.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Mehrere Platzhalter vervielfachen sich gegenseitig
Zwei Platzhalter mit Unions bilden ein kartesisches Produkt. Die Kombination der Größen 'sm' | 'lg' mit den Farben 'red' | 'blue' über ein Trennzeichen ergibt vier Literaltypen.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Warum das nützlich ist
Mit Template-Literal-Typen können Sie Familien von Zeichenketten präzise beschreiben — etwa CSS-Klassennamen, Ereignisnamen oder Routenpfade — sodass der Compiler fehlerhafte Zeichenketten bereits vor der Laufzeit zurückweist.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Zahlen und Booleans werden umgewandelt
Nicht-String-Typen, die in einem Template-Literal-Typ verwendet werden, werden in ihre Stringdarstellung umgewandelt. Das Zahlenliteral 42 wird im resultierenden Stringtyp zum Text 42.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Einen generischen Platzhalter verwenden
Eine generische Funktion kann aus dem Literaltyp ihres Arguments einen Template-Literal-Rückgabetyp erstellen, sodass die genaue Zeichenkette an jeder Aufrufstelle bekannt ist.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeEingaben einschränken
Sie können verlangen, dass ein Wert einem Template-Literal-Typ entspricht. Akzeptiert werden nur Zeichenketten, die dem beschriebenen Muster entsprechen, wodurch Tippfehler bereits zur Compile-Zeit erkannt werden.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignableEin breiter string-Typ zerstört das Muster
Wenn ein Platzhalter statt eines Literals den breiten Typ string hat, wird das gesamte Template zu string. Für konkrete Typen sind Literalwerte erforderlich, oft mithilfe von as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Wo Sie sie einsetzen sollten
Template-Literal-Typen eignen sich überall dort, wo Zeichenketten einer Struktur folgen: bei CSS-Utility-Klassen, vorangestellten Bezeichnern, Abfrageschlüsseln und Ereignisnamen. Sie machen aus Zeichenkettenkonventionen vom Compiler geprüfte Verträge.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Kurzer Check
Testen Sie Ihr Verständnis der Grundlagen von Template-Literal-Typen.
Zusammenfassung
Template-Literal-Typen erstellen String-Literal-Typen, indem sie Platzhalter in umgebenden Text einsetzen. Platzhalter mit Unions werden zu jeder Kombination erweitert, und mehrere Unions bilden ein kartesisches Produkt. Nicht-String-Literale werden in ihre Textdarstellung umgewandelt. Ein Platzhalter vom breiten Typ string reduziert das Ergebnis auf string; für präzise Typen sind daher Literalwerte erforderlich, oft mithilfe von as const. So werden Zeichenkettenkonventionen vom Compiler geprüft.
Häufig gestellte Fragen
Ist die Lektion „Grundlagen der Template-Literal-Typen“ kostenlos?
Ja — der vollständige Text von „Grundlagen der Template-Literal-Typen“ 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 „Grundlagen der Template-Literal-Typen“?
Erstellen Sie Stringtypen aus Unions und Platzhaltern. 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 1 von 4.
Wie lange dauert die Lektion „Grundlagen der Template-Literal-Typen“?
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
- Grundlagen der Template-Literal-Typen
- Strukturierte Strings modellieren
- String-Unions und Autovervollständigung
- Intrinsische String-Manipulationstypen