`${T}` Template Literal Types
Last updated: 2026-10-22
`${T}` Template Literal Types
Template literal types concatenate at the type level: `${A}-${B}` enumerates every combination of A and B's literals. Ideal for string conventions like event names, routes and CSS classes.
| Group | Type Composition |
|---|---|
| Kind | Type |
| Strict mode | Not required |
ℹ️ Info The editor transpiles TypeScript to JavaScript and runs it (no type checking); see each example's Output for type-check results.
📝 Syntax
type Lang = "zh" | "en";
type Page = "home" | "about";
type Route = `/${Lang}/${Page}`; // a union of 4 combinations⚙️ Parameters
| `${T}` | Place literal unions inside ${}; union members expand into a cartesian product |
|---|---|
| Uppercase/Lowercase | Built-in character-transform utility types sharing this mechanism |
Returns：A union of every string combination — purely compile-time, nonexistent at runtime.
▶ Example
Edit the code below and click Try it to see the transpiled result:
Output：
user:created | order:deleted
(Runtime output after transpilation; "user:updated" in the array is a compile error — it is not among the 4 combinations)💡 Notes
ℹ️ Info Placeholders must be literal types (string | number works, but union expansion happens on literal unions); the combination count is the product of member counts.
💡 Tip Pair with infer in conditional types to extract fragments: type OnEvent<T> = T extends `on${infer E}` ? E : never.
⚠️ Note Large unions explode combinatorially (10x10 = 100 branches) and slow compilation; cap union sizes or fall back to string.
🏷️ Related Type Composition
💡 Related cases
More cases coming soon.
📚 Related tutorials
❓ FAQ
Q Do template literal types exist at runtime?
A No. It is a compile-time type operation, erased after transpilation; only ordinary string values exist at runtime.
Q How do I extract part of a string type?
A Conditional types with infer: type Event<T> = T extends `on${infer Name}` ? Name : never turns onCreated into created. See the infer-keyword entry.
Q Are built-ins like Uppercase<T> template literal types?
A Yes — Uppercase/Lowercase/Capitalize/Uncapitalize transform characters via the same mechanism and compose freely with custom template literal types.
