What are template literal types? | Interview Question

Q: What are template literal types?

**Target Audience:** Developers comfortable with literal and union types who want string-shaped APIs (event names, routes, CSS values, config paths) to be checked by the compiler. **Difficulty:** Hard **TypeScript version:** Every type claim below was checked by TypeScript 5.4.5 with `--strict`; release facts (4.1, 4.8) are cited, not run. > **How to read this doc:** Every idea is explained in plain language first, then tagged with `📌 Interview term:` so you also learn the exact words an interviewer expects. Type claims are checked by `tsc` (an `Equal ` line or a `// @ts-expect-error` line), and the **Verified** section quotes the real output in full. ## 1. Why This Even Matters — A Story First A café prints its menu from two lists: sizes (small, medium, large) and drinks (latte, mocha). Nobody types out "small latte", "small mocha", "medium latte"... by hand. The printer combines the lists and produces all six. And when an order slip comes back saying "large mocha", the barist

The problem

Question presented to candidate: "What are template literal types in TypeScript? Show me a couple of places you would actually use them, and how you would pull information back out of a string type."

What a strong answer should cover:

The syntax mirrors JavaScript template strings, but builds string literal types: `on${Capitalize<Ev>}`; added in TypeScript 4.1
Unions in the holes multiply: every combination is produced, and very large products are refused (error TS2590)
The intrinsic helpers Uppercase, Lowercase, Capitalize, Uncapitalize, and primitive holes such as `${number}px` that make patterns rather than finite unions
Combined with key remapping (as) to derive property names, e.g. onNameChange handlers from a model
With infer in a conditional type they parse strings: route params, Split, dotted paths; a leading infer takes the shortest match

Code / implementation expected: Yes — derive event or handler names, and write one small parser such as route params.

template-literal-types

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers comfortable with literal and union types who want string-shaped APIs (event names, routes, CSS values, config paths) to be checked by the compiler. Difficulty: Hard TypeScript version: Every type claim below was checked by TypeScript 5.4.5 with --strict; release facts (4.1, 4.8) are cited, not run.

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer expects. Type claims are checked by tsc (an Equal line or a // @ts-expect-error line), and the Verified section quotes the real output in full.

1. Why This Even Matters — A Story First

A café prints its menu from two lists: sizes (small, medium, large) and drinks (latte, mocha). Nobody types out "small latte", "small mocha", "medium latte"... by hand. The printer combines the

The solution is hidden so you can try first

9 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

TypeScriptBuilding string types: unions, intrinsics, patterns and handler names

Practice

TypeScriptParsing strings: route params, Split, dotted paths and limits

Practice

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.