Template Literal Types: Strings You Can Compute

Recall how literal types let a value be exactly "GET" rather than any string. Template literal types take that idea and let you build new string-literal types by interpolating other types into a template — using the same backtick ${} syntax you already know from runtime string templates, but at the type level.

type Lang = "en" | "fr";
type Greeting = `hello_${Lang}`;
// Greeting = "hello_en" | "hello_fr"

The real power appears when you interpolate a union: TypeScript expands every combination automatically (a cross-product). Two unions of two members each produce four literals:

type Size = "sm" | "lg";
type Color = "red" | "blue";
type Class = `${Size}-${Color}`;
// "sm-red" | "sm-blue" | "lg-red" | "lg-blue"

Only string, number, bigint, boolean, null, and undefined can be interpolated — they get stringified into the type. Combined with intrinsic helpers like Uppercase, Lowercase, Capitalize, and Uncapitalize, template literals turn into a tool for modeling real string patterns — event names like on${Capitalize} , CSS-style tokens, or route strings — so a typo like "lg-green" becomes a compile-time error instead of a runtime surprise.