typescript / intermediate
Snippet
Template-Literal-Typen
Template-Literal-Typen ermöglichen es, neue String-Typen durch die Kombination bestehender Union-Typen zu erstellen. Dies ist äußerst nützlich, um vorhersehbare String-Muster wie CSS-Klassen oder Aktionsnamen zu generieren.
snippet.ts
typescript
1
2
3
4
5
6
7
type Direction = "left" | "right";type Speed = "fast" | "slow";type Movement = `${Direction}-${Speed}`;const action: Movement = "left-fast";// const error: Movement = "up-fast"; // Error
Erklärung
1
type Movement = `${Direction}-${Speed}`;
Kombiniert jeden String aus 'Direction' mit jedem String aus 'Speed', getrennt durch einen Bindestrich.
2
const action: Movement = "left-fast";
Validiert, dass der String einer der vier generierten Permutationen entspricht.