Template Literal Types in TypeScript
Template Literal Types
~13 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Zum Abschluss von Phase 4: Template Literal Types übertragen JavaScripts Template-Strings (`Hallo ${name}`) auf die TYP-Ebene – String-Muster, die TypeScript zur Kompilierzeit prüfen kann.
Die Grundsyntax
type EventName = `on${string}`;
let a: EventName = 'onClick'; // ✓
let b: EventName = 'onChange'; // ✓
let c: EventName = 'click'; // ✗ Fehler - beginnt nicht mit 'on'`on${string}` ist ein TYP, der JEDEN String akzeptiert, der mit 'on' BEGINNT – ${string} innerhalb des Template Literal Types funktioniert wie ein Platzhalter für "irgendein string", genau wie bei normalen Template Strings zur Laufzeit.
Kombination mit Literal Unions: alle Varianten erzeugen
type Aktion = 'ausleihen' | 'zurueckgeben' | 'reservieren';
type EventName = `medium-${Aktion}`;
// Automatisch ERZEUGT: 'medium-ausleihen' | 'medium-zurueckgeben' | 'medium-reservieren'
function sendeEvent(name: EventName): void {
console.log(`Event gesendet: ${name}`);
}
sendeEvent('medium-ausleihen'); // ✓
sendeEvent('medium-verschenken'); // ✗ Fehler - 'verschenken' ist keine gültige AktionWird ein Template Literal Type mit einer LITERAL-UNION (Kapitel 10) kombiniert, erzeugt TypeScript AUTOMATISCH die KOMPLETTE Kombination aller möglichen Werte – aus 3 möglichen Aktion-Werten entstehen automatisch 3 mögliche EventName-Werte, OHNE dass Sie sie einzeln aufschreiben müssten.
Praxis: ein typsicheres Event-System für die Bibliothek
export type MediumAktion = 'ausgeliehen' | 'zurueckgegeben' | 'reserviert' | 'hinzugefuegt';
export type BibliotheksEventName = `medium-${MediumAktion}`;
export type BibliotheksEventHandler = (eventName: BibliotheksEventName, isbn: string) => void;function protokolliereEvent(eventName: BibliotheksEventName, isbn: string): void {
console.log(`[${new Date().toISOString()}] ${eventName}: ${isbn}`);
}
protokolliereEvent('medium-ausgeliehen', '978-3-608-93830-2'); // ✓
protokolliereEvent('medium-verloren', '978-3-608-93830-2'); // ✗ Fehler - Tippfehler wird SOFORT erkanntBonus: eingebaute String-Manipulations-Typen
type Grossgeschrieben = Capitalize<'hallo'>; // 'Hallo'
type Kleingeschrieben = Lowercase<'HALLO'>; // 'hallo'
type Grossbuchstaben = Uppercase<'hallo'>; // 'HALLO'
type Kleingeschrieben2 = Uncapitalize<'Hallo'>; // 'hallo'
// Praktisch kombiniert mit Kapitel 21s Key-Remapping:
type Getter<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};Capitalize/Lowercase/Uppercase/Uncapitalize sind eingebaute Template-Literal-Hilfstypen für genau diesen Anwendungsfall – die Zeile aus Kapitel 21 ergibt jetzt vollständig Sinn: string & K stellt sicher, dass K (der abstrakte Schlüsseltyp aus keyof T) tatsächlich als string behandelt werden kann, BEVOR Capitalize darauf angewendet wird.
Achtung: Template Literal Types sind mächtig, aber bei ÜBERMÄSSIGEM Einsatz (sehr lange, verschachtelte Muster) können Fehlermeldungen UNLESERLICH werden und die Kompilierzeit spürbar steigen. Nutzen Sie sie gezielt für ECHTE String-Muster (Event-Namen, CSS-Klassen, Routen-Pfade), nicht als generelles Ersatzwerkzeug für normale String-Validierung, die zur LAUFZEIT ohnehin nötig ist (siehe Kapitel 25, Fehlerbehandlung).
Tipp: Damit ist Phase 4 (Fortgeschrittene Typen) abgeschlossen – Generics, Type Narrowing, Utility Types, Mapped Types, Conditional Types, Template Literal Types. Phase 5 wendet sich der PRAKTISCHEN Seite zu: Module, Fehlerbehandlung, Async/Await, Tooling und Testing – alles an unserer nun deutlich gewachsenen Bibliotheksverwaltung.