Template Literal Types
Combine string literal types with template literal syntax to derive types like event names, CSS property strings, and API route paths.
Template Literal Types is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Are Template Literal Types?
TypeScript can build string types from template literals at the type level. Combined with union types, you can express thousands of valid strings without listing each one.
Basic Template Literal Type
Use backtick-quoted strings in type position — they accept other types as interpolations.
type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!'; // OK
const b: Greeting = 'Hi, Alice!'; // ErrorCombining Unions
When you interpolate a union, TypeScript creates the cross-product of all combinations.
type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';
type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)Event Name Inference
Derive event handler names from event names — a classic real-world use.
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'
type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }String Manipulation Utility Types
TypeScript ships built-in helpers: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.
type Hi = Capitalize<'hello'>; // 'Hello'
type Yell = Uppercase<'hello'>; // 'HELLO'
type Quiet = Lowercase<'HELLO'>; // 'hello'
type Lower = Uncapitalize<'Hi'>; // 'hi'CSS Property Types
Express CSS-like string types: pixel values, hex colours, percentages.
type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;
type Style = { padding: Px; color: Hex; width: Pct };
const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // ErrorInferring with Template Literals
The infer keyword can extract parts of a string type — useful for parsers and route types.
type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;
type Result = ExtractName<'Hello, Alice!'>; // 'Alice'API Route Types
Type-safe API routes: extract path parameters from a string pattern.
type PathParams<T extends string> =
T extends `${string}/:${infer Param}/${infer Rest}`
? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
: T extends `${string}/:${infer Param}`
? { [K in Param]: string }
: {};
type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }Tailwind Class Suggestion Types
Limit string props to known design-system values.
type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'
function Box(props: { className: TwSpacing }) { /* ... */ }Limits and Compiler Performance
Template literal cross-products can explode (a union of 50 × 50 produces 2500 strings). TypeScript will compile but inference becomes slow. Keep the alphabet small.
Distinguishing String Literal Types
Use template literals as a more expressive form of branding — a string still, but constrained.
Quick Check
What does type X = `on${Capitalize<'click' | 'focus'>}` evaluate to?
Recap: Template Literal Types
Build string types from template literals with interpolated unions. Cross-products explode quickly — keep alphabets small. Use Capitalize/Uppercase/Lowercase/Uncapitalize. Combine with infer to extract parts of strings. Great for event names, CSS values, route params, and design-system class names.
Frequently asked questions
Is the “Template Literal Types” lesson free?
Yes — the full text of “Template Literal Types” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Template Literal Types”?
Combine string literal types with template literal syntax to derive types like event names, CSS property strings, and API route paths. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Template Literal Types” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.