What are template literal types? Build an event-handler name type from a union of events, and show inferring a piece back out of a string pattern.
String-level type manipulation — deriving precise string types instead of loose `string`.
Template literal types apply JS template-literal syntax at the TYPE level: `on${Capitalize<Event>}` produces a new string-literal type for each member of the Event union (they distribute over unions, so `'click' | 'focus'` becomes `'onClick' | 'onFocus'`). TS ships intrinsic string manipulators — `Uppercase`, `Lowercase`, `Capitalize`, `Uncapitalize` — usable inside them. The power move is `infer` inside a conditional that matches a pattern: `type EventName<T> = T extends `on${infer E}` ? E : never` pulls the event back out of the handler name, so the transformation is reversible at the type level. This is how libraries type CSS-in-JS keys, i18n paths, and route params (`/users/${infer Id}`). Combined with mapped-type key remapping (`{ [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] }`), you can synthesize a whole API surface — a correctly-typed getter per field — from a plain interface. The constraint to remember: these operate purely in the string type domain, cost nothing at runtime, and TS caps expansion, so a template over two large unions multiplies and can blow up compile time — keep the input unions bounded.
Typed event-handler props (onClick), route/i18n path types, deriving getter/setter names, and CSS property key types.