Template Literal Types
debt(d5/e3/b3/t7)
Closest to 'specialist tool catches it' (d5), because the TypeScript compiler itself (listed in detection_hints.tools) will catch misuse — such as passing a plain string where a template literal type is expected — but only when the type annotations are in place. The automated field is 'no', meaning it doesn't fire without explicit type declarations, so it's not as easy as a default linter rule.
Closest to 'simple parameterised fix' (e3), because the quick_fix describes replacing string with a template literal type pattern or combining with mapped types — a targeted refactor within one component or type definition file, not a codebase-wide change.
Closest to 'localised tax' (b3), because template literal types apply only to specific type definitions and the string APIs they constrain. The applies_to scope (web, cli) is broad but the concept itself is self-contained in type layer; only the components that define or consume those specific string-pattern types are affected.
Closest to 'serious trap' (t7), because the misconception field directly states that developers conflate template literal types with JavaScript template literals, expecting runtime behavior. This contradicts how the visually identical JS syntax works — the 'obvious' interpretation (runtime string interpolation) is completely wrong at the type level, which is a serious cognitive mismatch for developers familiar with JS.
TL;DR
Explanation
Template literal types extend string literal types using template syntax: type Greeting = `Hello ${string}`. Combined with mapped types and conditional types, they enable: type-safe event names (onClick, onChange), CSS property names, API endpoint patterns, and string transformation types. Key utility types: Uppercase<S>, Lowercase<S>, Capitalize<S>, Uncapitalize<S>. These are computed at type level — no runtime cost. Template literal types enable exhaustive checking of string patterns that were previously impossible to type safely.
Common Misconception
Why It Matters
Common Mistakes
- Using string where a template literal type would catch invalid values.
- Not combining with mapped types for generating related types from a union.
- Using Template Literal Types for runtime string building — they're compile-time only.
Code Examples
// No type safety on event names:
function on(event: string, handler: () => void) {}type EventName = `on${Capitalize<string>}`; // onFoo, onClick etc
// More precise:
type ButtonEvent = `on${'Click' | 'Hover' | 'Focus'}`;
// 'onClick' | 'onHover' | 'onFocus'
function on(event: ButtonEvent, handler: () => void) {}
on('onClick', () => {}); // OK
on('onBlur', () => {}); // Type error