TypeScript · Types that pay for themselves
What are template literal types?
Short answer
Template literal types build string literal types from other string types using the same syntax as template literals. They are useful for event names, route patterns and key remapping, and they compose with unions.
A template literal type uses backtick syntax at the type level. For example, the type `type EventName<T extends string> = on${Capitalize<T>} ` maps "click" to "onClick". The type distributes over unions, so a union of inputs produces a union of outputs.
function handlerName(event: string): string {
return "on" + event.charAt(0).toUpperCase() + event.slice(1);
}
const clickHandler = handlerName("click");
const focusHandler = handlerName("focus");Where they help
- Typing event handler names such as onClick and onFocus
- Building route or API path unions from smaller segments
- Remapping object keys in mapped types
- Enforcing string formats at the type level, within reason
- Combining with intrinsic helpers such as Capitalize and Uppercase
Template literal types are erased and have no runtime effect. They are best for small, bounded sets of strings. A type that accepts any string and then tries to parse it is usually better handled by a runtime validator or a branded type.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1How does a template literal type distribute over a union?
- 2What are intrinsic string types such as Capitalize?
- 3How are template literal types used in key remapping?
- 4When should you prefer runtime validation over a string type?
Say it in the interview
Template literal types build string literal types from other string types. I use them for event handler names, route patterns and key remapping, often combined with Capitalize or Uppercase. They distribute over unions, so a small set of inputs can produce a precise set of output strings. I keep them shallow because combinatorial expansion can slow the compiler and make errors unreadable.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live TypeScript mock interview and get scored feedback on depth, clarity and confidence.