Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

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 Aktion

Wird 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

src/types/BibliotheksEvents.ts
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 erkannt

Bonus: 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.