How to use template literal types

Short answer

Template literal types construct new string types by embedding other types inside a template string, similar to JavaScript template literals.

Steps

1. Define a template type: type Greeting =Hello, ${World}; where World is a string literal type.
2. Combine unions to produce every permutation: type Color = 'red' | 'blue'; type EventName =on${Capitalize};
3. Use intrinsic string manipulation types: Uppercase, Lowercase, Capitalize, Uncapitalize.
4. Validate string patterns at the type level.
5. Combine with mapped types to generate property names.

Tips

• Template literal types are invaluable for typing CSS-in-JS, event names, and routing paths.
• Excessive permutations from large unions can hit the type instantiation depth limit.

Common issues

• Very large unions of template literals can degrade compiler performance.
• Recursive template literal types may require tail-recursion elimination flags in recent TypeScript versions.