Template Literal Types

TL;DR

Explanation

Template literal types extend string literal types using template syntax: type Greeting = `Hello ${string}`. Combined with mapped types and conditional types, they enable: type-safe event names (onClick, onChange), CSS property names, API endpoint patterns, and string transformation types. Key utility types: Uppercase<S>, Lowercase<S>, Capitalize<S>, Uncapitalize<S>. These are computed at type level — no runtime cost. Template literal types enable exhaustive checking of string patterns that were previously impossible to type safely.

Common Misconception

Why It Matters

Common Mistakes

• Using string where a template literal type would catch invalid values.
• Not combining with mapped types for generating related types from a union.
• Using Template Literal Types for runtime string building — they're compile-time only.

Code Examples

// No type safety on event names:
function on(event: string, handler: () => void) {}

type EventName = `on${Capitalize<string>}`; // onFoo, onClick etc

// More precise:
type ButtonEvent = `on${'Click' | 'Hover' | 'Focus'}`;
// 'onClick' | 'onHover' | 'onFocus'

function on(event: ButtonEvent, handler: () => void) {}
on('onClick', () => {}); // OK
on('onBlur', () => {}); // Type error

References

• ↗ https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

Tags

Related Terms