Template Literal Type Basics
Build string types from unions and placeholders.
Template Literal Type Basics is a free TypeScript 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 TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Strings at the Type Level
Template literal types build new string literal types by combining other string types. They use the same backtick-and-placeholder syntax as runtime template strings, but operate purely on types.
A Simple Template Literal Type
Imagine a type alias Greeting defined as a template literal containing the text Hello, followed by a placeholder for the type Name. If Name is the literal 'Ada', then Greeting is the literal type 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)Placeholders Embed Other Types
Inside the placeholder you can put any string-like type: a literal, a type parameter, or a union. TypeScript substitutes it into the surrounding text to form a new literal type.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)Combining Unions Multiplies Variants
When a placeholder holds a union, the template expands across every member. A template combining 'a' | 'b' with a fixed suffix produces a union of each combination.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Multiple Placeholders Multiply Together
Two union placeholders form a cross product. Combining sizes 'sm' | 'lg' with colors 'red' | 'blue' via a separator yields four literal types.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Why This Is Useful
Template literal types let you describe families of strings precisely — CSS class names, event names, route paths — so the compiler rejects malformed strings before runtime.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Numbers and Booleans Coerce
Non-string types placed in a template literal type coerce to their string form. A number literal 42 becomes the text 42 within the resulting string type.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Using a Generic Placeholder
A generic function can build a template literal return type from its argument's literal type, so the precise string is known at each call site.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeConstraining Inputs
You can require that a value match a template literal type. Only strings fitting the described pattern are accepted, catching typos at compile time.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignableWide string Breaks the Pattern
If a placeholder is the wide string type rather than a literal, the whole template collapses to string. Specificity requires literal inputs, often via as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Where to Use Them
Template literal types are ideal anywhere strings follow a structure: CSS utility classes, prefixed identifiers, query keys, and event names. They turn string conventions into compiler-checked contracts.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Quick Check
Test your understanding of template literal type basics.
Recap
Template literal types build string literal types by substituting placeholders into surrounding text. Union placeholders expand into every combination, and multiple unions form a cross product. Non-string literals coerce to their text form. A wide string placeholder collapses the result to string, so literal inputs (often via as const) are needed for precise types. They make string conventions compiler-checked.
Frequently asked questions
Is the “Template Literal Type Basics” lesson free?
Yes — the full text of “Template Literal Type Basics” is free to read here on the web, and the TypeScript 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 TypeScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Template Literal Type Basics”?
Build string types from unions and placeholders. You practise TypeScript 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 TypeScript Academy?
No prior experience is required. TypeScript 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 Type Basics” 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 TypeScript Academy lesson?
Yes. Every TypeScript 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.
All lessons in this course
- Template Literal Type Basics
- Modeling Structured Strings
- String Unions and Autocomplete
- Intrinsic String Manipulation Types