Template Literal Type

ELI5 — The Vibe Check

Template literal types let TypeScript understand string patterns at the type level. It's like teaching TypeScript to read formats — it can tell the difference between 'user-123' and 'order-456' just from the type definition.

Real Talk

A TypeScript feature that applies template literal string syntax to the type system, enabling creation of string types based on patterns and combinations. They can generate union types from other unions, validate string formats, and manipulate string types with intrinsic types like Uppercase and Lowercase.

Show Me The Code

type EventName = 'click' | 'scroll' | 'resize';
type Handler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onScroll' | 'onResize'

type Route = `/api/${string}/v${number}`;
const valid: Route = '/api/users/v2';    // OK
// const bad: Route = 'api/users/v2';    // Error: missing leading /

When You'll Hear This

"Template literal types let us type-check API route patterns at compile time." / "We generated all our event handler types from a single union using template literals."