Template-Literal-Typen
Kombinieren Sie String-Literal-Typen mit der Template-Literal-Syntax, um Typen wie Ereignisnamen, CSS-Eigenschaften als Strings und API-Routenpfade abzuleiten.
Template-Literal-Typen ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Template-Literal-Typen?
TypeScript kann String-Typen auf Typebene aus Template-Literals erstellen. In Kombination mit Union-Typen lassen sich Tausende gültiger Zeichenketten ausdrücken, ohne jede einzeln aufzulisten.
Grundlegender Template-Literal-Typ
Verwenden Sie in einer Typposition in Backticks eingeschlossene Zeichenketten – sie akzeptieren andere Typen als Interpolationen.
type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!'; // OK
const b: Greeting = 'Hi, Alice!'; // ErrorUnions kombinieren
Wenn Sie eine Union interpolieren, erstellt TypeScript das kartesische Produkt aller Kombinationen.
type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';
type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)Ereignisnamen ableiten
Leiten Sie die Namen von Event-Handlern aus Ereignisnamen ab – eine klassische Anwendung aus der Praxis.
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'
type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }Utility-Typen zur String-Manipulation
TypeScript enthält integrierte Hilfstypen: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.
type Hi = Capitalize<'hello'>; // 'Hello'
type Yell = Uppercase<'hello'>; // 'HELLO'
type Quiet = Lowercase<'HELLO'>; // 'hello'
type Lower = Uncapitalize<'Hi'>; // 'hi'CSS-Property-Typen
Drücken Sie CSS-ähnliche String-Typen aus: Pixelwerte, Hex-Farben und Prozentangaben.
type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;
type Style = { padding: Px; color: Hex; width: Pct };
const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // ErrorMit Template-Literals inferieren
Mit dem Schlüsselwort infer lassen sich Teile eines String-Typs extrahieren – nützlich für Parser und Routentypen.
type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;
type Result = ExtractName<'Hello, Alice!'>; // 'Alice'API-Routentypen
Typsichere API-Routen: Extrahieren Sie Pfadparameter aus einem String-Muster.
type PathParams<T extends string> =
T extends `${string}/:${infer Param}/${infer Rest}`
? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
: T extends `${string}/:${infer Param}`
? { [K in Param]: string }
: {};
type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }Typen für Tailwind-Klassenvorschläge
Beschränken Sie String-Props auf bekannte Werte des Designsystems.
type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'
function Box(props: { className: TwSpacing }) { /* ... */ }Grenzen und Compilerleistung
Kartesische Produkte von Template-Literals können explodieren (eine Union von 50 × 50 ergibt 2500 Zeichenketten). TypeScript kompiliert zwar, aber die Inferenz wird langsam. Halten Sie das Alphabet klein.
String-Literal-Typen unterscheiden
Verwenden Sie Template-Literals als ausdrucksstärkere Form des Brandings – weiterhin ein String, aber mit Einschränkungen.
Kurzer Wissenstest
Worauf wird type X = `on${Capitalize<'click' | 'focus'>}` ausgewertet?
Zusammenfassung: Template-Literal-Typen
Erstellen Sie String-Typen aus Template-Literals mit interpolierten Unions. Kartesische Produkte wachsen schnell – halten Sie die Alphabete klein. Verwenden Sie Capitalize/Uppercase/Lowercase/Uncapitalize. Kombinieren Sie sie mit infer, um Teile von Zeichenketten zu extrahieren. Sie eignen sich hervorragend für Ereignisnamen, CSS-Werte, Routenparameter und Klassennamen von Designsystemen.
Häufig gestellte Fragen
Ist die Lektion „Template-Literal-Typen“ kostenlos?
Ja — der vollständige Text von „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 Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Template-Literal-Typen“?
Kombinieren Sie String-Literal-Typen mit der Template-Literal-Syntax, um Typen wie Ereignisnamen, CSS-Eigenschaften als Strings und API-Routenpfade abzuleiten. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 „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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Template-Literal-Typen
- Dekoratoren und Metadaten
- TypeScript mit React: FC-Generics und Hooks
- Strict Mode und any vermeiden