Lesson 22 — Template literal types (expert)

String types built from pieces

Template literal types use the same backtick syntax as template strings, but for types. With a union inside, TypeScript makes every combination: on${"Click" | "Hover"} is "onClick" | "onHover". Any other string is an error.

type Size = "sm" | "lg";
type ClassName = `btn-${Size}`; // "btn-sm" | "btn-lg"
const c: ClassName = "btn-lg";

Why it matters: event names, CSS classes and routes become exact and autocompleted instead of loose strings.