Template Literal Types

type TypeName = `prefix${Type}suffix`;

// Combined with union types, generates all string combinations.
type TypeName = `${UnionType1}-${UnionType2}`;

type Greeting = `Hello, ${string}!`;
let msg: Greeting = "Hello, TypeScript!"; // Works correctly.
// let msg2: Greeting = "Hi, TypeScript!"; // Error: does not match the pattern.

// Combined with union types, all combinations are generated automatically.
type Color = "red" | "green" | "blue";
type Size = "sm" | "md" | "lg";

// Generates "red-sm" | "red-md" | "red-lg" | "green-sm" | ... (9 combinations total).
type ColoredSize = `${Color}-${Size}`;
let cs: ColoredSize = "red-md"; // Works correctly.
// let cs2: ColoredSize = "red-xl"; // Error: "xl" is not in Size.

// Typing event name patterns.
type EventName = "click" | "focus" | "blur";
type HandlerName = `on${Capitalize<EventName>}`; // "onClick" | "onFocus" | "onBlur"

let handler: HandlerName = "onClick"; // Works correctly.

// Constraining object key patterns with template literal types.
type CSSProperty = "margin" | "padding";
type CSSDirection = "Top" | "Right" | "Bottom" | "Left";
type CSSShorthand = `${CSSProperty}${CSSDirection}`;
// Results in "marginTop" | "marginRight" | ... | "paddingLeft" (8 combinations total).

let prop: CSSShorthand = "marginTop"; // Works correctly.

// String transformation with built-in utility types
type Upper = Uppercase<"hello">; // "HELLO"
type Lower = Lowercase<"WORLD">; // "world"
type Cap = Capitalize<"typescript">; // "Typescript"

const upper: Upper = "HELLO";
console.log(upper); // Outputs: "HELLO"

Template literal types were introduced in TypeScript 4.1. They use backticks and placeholders (`${Type}`) to express string patterns at the type level — applying the same syntax as JavaScript template literals to type definitions.

The most powerful use case is combining them with union types. When you embed two union types in a template literal type, TypeScript automatically generates a string union representing the Cartesian product (every possible combination). This lets you define types for regularly patterned strings — such as CSS property names (marginTop, paddingLeft) or event handler names (onClick, onFocus) — without manually listing each one.

Additionally, four built-in utility types — Uppercase, Lowercase, Capitalize, and Uncapitalize — let you transform the casing of string literal types at the type level.