What are template literal types in TypeScript?
Why Interviewers Ask This
Mid-level TypeScript roles require deep understanding of this topic. Interviewers ask this to separate candidates who truly understand the mechanics from those who only know surface-level concepts.
Answer
Template literal types (TS 4.1) bring JavaScript template literal syntax into the type system, allowing string literal types to be combined and transformed. Basic example: type EventName<T extends string> = `on\${Capitalize<T>}`; — EventName<"click"> becomes "onClick". Union distribution: type Directions = "top" | "right" | "bottom" | "left"; type CSSProp = `margin-\${Directions}`; — produces "margin-top" | "margin-right" | "margin-bottom" | "margin-left". TypeScript also provides string manipulation utility types: Uppercase<S>, Lowercase<S>, Capitalize<S>, Uncapitalize<S>. Template literal types are used for: type-safe event names, CSS property names, API endpoint paths, i18n keys, and strongly typed string manipulation. Combined with mapped types and infer, they enable extremely precise typing of string-based APIs.
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a TypeScript codebase.