Lesson 16 of 80

Template Literal Types

Q: How would you generate a type for onClick/onFocus/onBlur handler props from a union of event names, without writing each one by hand?

A strong answer covers: Template literal types use JS-like ${} interpolation at the type level to build new string literal unions; Combine with Capitalize and a mapped type: { [K in `on${Capitalize }`]?: () => void }; This is purely type-level — it generates no runtime code.

JavaScript's template literal syntax, moved into type-space — building new string literal types by combining and interpolating other literal types.

11 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

`type Margin = \`margin-${Direction}\`` where Direction is `"top" | "bottom"`. What type does Margin resolve to?

"margin-top" | "margin-bottom" — one combination per union memberThe literal string "margin-${Direction}", unresolvedA plain string type with no further constraint

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Template Literal Types

What interviewers actually ask about this, and what a strong answer has to cover.

How would you generate a type for onClick/onFocus/onBlur handler props from a union of event names, without writing each one by hand?

A strong answer covers

Template literal types use JS-like ${} interpolation at the type level to build new string literal unions
Combine with Capitalize and a mapped type: { [K in `on${Capitalize<EventName>}`]?: () => void }
This is purely type-level — it generates no runtime code

Likely follow-ups

What happens if you interpolate a union inside a template literal type — does it produce one combined string or distribute?
How would you constrain a type to strings that look like hex colors, e.g. starting with #?
Where have you seen this pattern used in a real library (routing, CSS-in-JS, etc.)?

Practice these with the AI interviewer →

The plain-language idea

type Direction = "top" | "bottom" | "left" | "right";
type Margin = `margin-${Direction}`;
// "margin-top" | "margin-bottom" | "margin-left" | "margin-right"

The syntax is literally the same ${} interpolation from JavaScript's template literals — but at the type level, TypeScript computes every combination and produces a new union of literal string types. Interpolating a union inside a template literal type distributes across every member, the same distribution behavior conditional types have over unions.

A real, common use: typed event names

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

type Handlers = { [K in HandlerName]?: () => void };
// { onClick?: () => void; onFocus?: () => void; onBlur?: () => void }

Combined with a mapped type, this generates exactly the handler-prop names a component would need — onClick, onFocus, onBlur — computed from a single source list of event names, instead of hand-typing each one and risking them drifting out of sync.

Template literal types: string templates for the type checkerStep 1 of 3

type EventName = `on${Capitalize<string>}` — a type built like a template string, at the type level.

What people usually miss

Watch out

This is purely a type-level tool — it generates no runtime code. type Margin = \margin-$`` produces a set of valid string type possibilities the compiler checks against; nothing about it exists once compiled to JavaScript.
Template literal types can express structural patterns, like validating that a string looks like a specific format: type Hex = \#$`requires a string starting with#`, which is a real, checkable constraint at the type level.
This is what powers strongly-typed CSS-in-JS and routing libraries — deriving a union of every valid route path, or every valid CSS property-value combination, directly from a smaller set of source literals instead of maintaining it by hand.

Why this matters in interviews

"How would you generate a type for onClick/onFocus/onBlur handler props from a list of event names, without writing each one by hand?" is a great concrete exercise, and template literal types plus a mapped type is exactly the idiomatic answer.