Template Literal Types

Creating string patterns

type Event = `on${Capitalize<string>}`;
type ClickEvent = Event; // "onClick", "onHover", etc.

Union of literals via interpolation

type Size = "small" | "medium" | "large";
type SizeClass = `size-${Size}`; // "size-small" | "size-medium" | "size-large"

Using infer with template literals

type ExtractPrefix<S extends string> = S extends `${infer P}_SUFFIX` ? P : never;
type X = ExtractPrefix<'hello_SUFFIX'>; // "hello"

Practical use – CSS‑in‑JS

const btnClass: SizeClass = 'size-medium';