typescript / intermediate
Snippet
Konstruktion von Event-Namen mit Template-Literal-Typen
Template-Literal-Typen erzeugen String-Unions durch Kombination von Vorlagen mit Modifikatoren wie `Capitalize`. Dies ermöglicht die Erstellung typsicherer, dynamischer Eigenschaftsnamen wie Event-Listener.
snippet.ts
typescript
1
2
3
4
5
6
7
8
9
10
11
type EventKind = "click" | "hover" | "focus";type EventHandlerName = `on${Capitalize<EventKind>}`;type EventRegistry = {[K in EventHandlerName]?: () => void;};const handlers: EventRegistry = {onClick: () => console.log("Clicked"),onHover: () => console.log("Hovered")};
Erklärung
1
type EventHandlerName = `on${Capitalize<EventKind>}`;
Erstellt die String-Literaltypen 'onClick' | 'onHover' | 'onFocus' mittels String-Interpolation und Großschreibung.
2
type EventRegistry = { [K in EventHandlerName]?: () => void; };
Verwendet einen Mapped Type über der erzeugten String-Union zur Definition optionaler Callback-Funktionen.
3
const handlers: EventRegistry = { ... };
Stellt sicher, dass das Handler-Objekt strikt den generierten Event-Eigenschaften entspricht.