Template Literal Types — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Template Literal Types
📋Basic
⚙️Intrinsics
🔄Patterns
✅Advanced
🎯 Next: Test →
Step 1 / 4
Speed
Basic
Template literal types compose string union members💡 Analogy
Like a mail merge — the template has a placeholder, and TypeScript fills in every option.
`on${Capitalize<EventName>}` distributes over the EventName union: "click" → "onClick", "focus" → "onFocus", "blur" → "onBlur".
Console Output
> Handler = "onClick" | "onFocus" | "onBlur"
> Type-checked: no typos possible
●template-literals.ts
BasicL2–4
1// Template literal type — compose string types
2type EventName = 'click' | 'focus' | 'blur';
3type Handler = `on${Capitalize<EventName>}`;
4// 'onClick' | 'onFocus' | 'onBlur'
5 
6// String manipulation intrinsics
7type Upper = Uppercase<'hello'>;   // 'HELLO'
8type Lower = Lowercase<'HELLO'>;   // 'hello'
9type Cap   = Capitalize<'world'>;  // 'World'
10type Uncap = Uncapitalize<'World'>; // 'world'
11 
12// CSS property type safety
13type CSSUnit = 'px' | 'em' | 'rem' | '%';
14type CSSValue = `${number}${CSSUnit}`;
15// '0px' | '16em' | '1.5rem' ... (any number followed by unit)
16 
17// Route builder
18type Route = '/users' | '/posts' | '/comments';
19type ApiRoute = `/api${Route}`;
20// '/api/users' | '/api/posts' | '/api/comments'
21 
22// Object key patterns
23interface EventEmitter<T extends Record<string, unknown>> {
24  on<K extends string & keyof T>(event: K, handler: (data: T[K]) => void): void;
25  emit<K extends string & keyof T>(event: K, data: T[K]): void;
26}
26 lines
Timeline — 4 Steps
Basic
Template literal types compose string union members💡 Analogy
Like a mail merge — the template has a placeholder, and TypeScript fills in every option.
`on${Capitalize<EventName>}` distributes over the EventName union: "click" → "onClick", "focus" → "onFocus", "blur" → "onBlur".
Console Output
> Handler = "onClick" | "onFocus" | "onBlur"
> Type-checked: no typos possible

Was this page helpful?

Discussion

Template literal types compose string union members

💡 Analogy

Like a mail merge — the template has a placeholder, and TypeScript fills in every option.

`on${Capitalize<EventName>}` distributes over the EventName union: "click" → "onClick", "focus" → "onFocus", "blur" → "onBlur".

Console Output

> Handler = "onClick" | "onFocus" | "onBlur"
> Type-checked: no typos possible

Template literal types compose string union members

💡 Analogy

Like a mail merge — the template has a placeholder, and TypeScript fills in every option.

`on${Capitalize<EventName>}` distributes over the EventName union: "click" → "onClick", "focus" → "onFocus", "blur" → "onBlur".

Console Output

> Handler = "onClick" | "onFocus" | "onBlur"
> Type-checked: no typos possible