Template Literal Types

Template literal types (TypeScript 4.1) bring JavaScript's template string syntax to the type level. They construct new string literal types by interpolating other types into a template.

Basic Syntax

Template literal types use the same backtick syntax as JavaScript template strings, but at the type level:

type Greeting = `Hello, ${string}`;  // matches any string starting with "Hello, "
type Port = `${number}`;             // matches any numeric string
type EventName = `on${string}`;      // matches onClick, onScroll, etc.

The ${string} and ${number} placeholders match any string or numeric string respectively.

Union Distribution

When a union type is interpolated, the template distributes over each member, producing all combinations:

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

This combinatorial expansion is powerful for generating all valid string patterns from a set of components. Multiple union positions multiply together.

Intrinsic String Manipulation Types

TypeScript provides four built-in types for transforming string literal types:

• Uppercase<T> — Uppercase<'hello'> → 'HELLO'
• Lowercase<T> — Lowercase<'HELLO'> → 'hello'
• Capitalize<T> — Capitalize<'hello'> → 'Hello'
• Uncapitalize<T> — Uncapitalize<'Hello'> → 'hello'

These are "intrinsic" — they're implemented in the compiler, not in TypeScript code.

Practical Patterns

Event handler types:

type Events = 'click' | 'focus' | 'blur';
type Handlers = `on${Capitalize<Events>}`; // 'onClick' | 'onFocus' | 'onBlur'

CSS utility classes:

type Spacing = 1 | 2 | 4 | 8;
type Direction = 't' | 'r' | 'b' | 'l';
type SpacingClass = `p${Direction}-${Spacing}`; // 'pt-1' | 'pt-2' | ... 'pl-8'

API route patterns:

type ApiRoute = `/api/${string}`;
type UserRoute = `/api/users/${number}`;

Pattern Matching with infer

Template literal types combine with conditional types and infer for string parsing:

type ExtractParam<T> = T extends `${string}:${infer P}/${string}` ? P : never;
type Param = ExtractParam<'/api/:userId/posts'>; // 'userId'

This pattern-matches against string types and extracts substrings — it's how type-safe routing libraries (like tRPC and Hono) extract route parameters at the type level.

Recursive String Types

Combined with recursive conditional types, template literals enable complex string transformations:

type CamelCase<S extends string> = 
  S extends `${infer Head}_${infer Tail}`
    ? `${Head}${Capitalize<CamelCase<Tail>>}`
    : S;
type Result = CamelCase<'hello_world_foo'>; // 'helloWorldFoo'

Key Interview Distinction

Template literal types construct string types using backtick syntax with type interpolation. Unions in templates distribute to produce all combinations. Intrinsic types (Uppercase, Capitalize) transform string cases. Combined with infer, they enable type-level string parsing for routes, event names, and CSS utilities. Libraries like tRPC use these for type-safe API routes.