Antwort.

Hintergrund

TypeScript erlaubte lange Zeit die Beschreibung literaler Typen für einzelne string- oder numerische Werte. Mit dem Auftreten von literalen Vorlagen entstand jedoch die Notwendigkeit, bestimmte Vorlagen von Strings zu typisieren. Template Literal Types ermöglichen die Beschreibung von Typen, die auf der template-mäßigen Verknüpfung von Strings basieren, was eine statische Validierung der Struktur von String-Werten gewährleistet.

Problem

Es ist unmöglich, die Übereinstimmung eines Strings mit einem bestimmten Format (z.B. 'user_42') mit herkömmlichen string-Typen zu überprüfen, da diese zu allgemein sind. Ohne literale Vorlagen kann der Compiler nicht garantieren, dass der String einem streng definierten Muster entspricht.

Lösung

Template Literal Types ermöglichen die Bildung komplexer String-Typen zur Kompilierungszeit und gewährleisten eine strenge Überprüfung ihrer Übereinstimmung mit bestimmten Vorlagen.

Beispielcode:

type UserId = `user_${number}`;

function loadUser(id: UserId) {
  // ...
}

loadUser('user_123'); // korrekt
loadUser('admin_123'); // Kompilierungsfehler

Wesentliche Merkmale:

Bildung von String-Typen basierend auf literalen Vereinigungen
Unterstützung von Kombinationen, Verschachtelungen und Manipulationen mit Schlüsseln von Objekten
Erhöhung der Typensicherheit für String-Identifikatoren, URLs und andere Strukturen

Gemeine Fragen.

Kann man Template Literal Types nur mit number/literal verwenden? Kann man eigene String-Literale in der Vorlage verwenden?

Man kann alle literalen Typen verwenden — Strings, Zahlen, Vereinigungen:

type EventType = `event_${'click' | 'hover'}`; // event_click | event_hover

Kann man einen normalen String übergeben, wenn die Funktion einen Typ Template Literal erwartet?

Nein, wenn der Typ ausdrücklich einen Template Literal erwartet, passt einfach string nicht:

function handler(type: `btn_${string}`) {}
handler('btn_click'); // ok
handler('button'); // Kompilierungsfehler

Funktionieren literale template-Strings mit gemappten Typen und keyof?

Ja, Template Literal Types kombinieren sich hervorragend mit gemappten Typen und Objekt-Schlüsseln:

const colors = {red: 1, blue: 2};
type ColorKey = keyof typeof colors;
type ColorClass = `color-${ColorKey}`; // color-red | color-blue

Typische Fehler und Anti-Pattern

Verwendung des template-typs, wo jeder string passt
Zu aggressive template-typdefinitionen, die keine Flexibilität lassen
Bindung von Typen an runtime-Werte, die vom Compiler nicht kontrolliert werden

Beispiel aus der Praxis

Negativer Fall

Die API akzeptiert Identifikatoren wie 'user_XXX', die Funktion ist nicht typisiert — es können beliebige Strings übergeben werden, bei einem Serverfehler treten Bugs auf.

Vorteile:

Keine Einschränkungen hinsichtlich des Wertes

Nachteile:

Das Team macht Fehler, indem es falsche Strings übergibt; die Tests sind oberflächlich

Positiver Fall

Der Typ UserId = user_${number} wird verwendet, und die Korrektheit der Funktionsargumente wird vor der Kompilierung garantiert, um sichere Anfragen an den Server zu gewährleisten.