Advanced Types
Template Literal Types
Master Template Literal Types in TypeScript, string manipulation utilities (Capitalize, Uppercase), event name generation, and CSS/styling type safety.
Last Updated: July 29, 2026
•
10 min read
Introduced in TypeScript 4.1, Template Literal Types build on ES6 template literal syntax to manipulate and combine string literal types at compile time.
1. Basic Template Literal Syntax
2. Built-in String Manipulation Utilities
TypeScript provides four built-in utility types for string literal transformation:
1. Uppercase
2. Lowercase
3. Capitalize
4. Uncapitalize
3. Real-World Use Case: CSS Dimension Units and Color Formatting
4. Interactive Code Playground
Test template literal types below:
5. Summary Table
| Utility Type | Input Example | Result Type |
|---|---|---|
Uppercase | "hello" | "HELLO" |
Lowercase | "WORLD" | "world" |
Capitalize | "name" | "Name" |
Uncapitalize | "Name" | "name" |
id-${"a" \| "b"} | "id-a" \| "id-b"` |