Literal types
📚 What are Literal Types in TypeScript? A literal type is a type that is an exact specific value, not just any string or number. Instead of type string (any string), you can write 'red' | 'blue' | 'green' (only those three exact strings). TypeScript will then catch any typos or invalid values at c…
Appy Says…
What if a variable shouldn't just be any string, but specifically 'north' | 'south' | 'east' | 'west'? TypeScript's literal types let you be that precise — and the compiler catches any typo or invalid value instantly.
What are Literal Types?
Literal types restrict a value to one specific string, number, or boolean — not just its base type. Combined with union types, they create precise allowed-value sets.
- •
type Direction = 'north' | 'south' | 'east' | 'west'; - •
type Status = 'idle' | 'loading' | 'success' | 'error'; - •
type Dice = 1 | 2 | 3 | 4 | 5 | 6; - •
type Flag = true | false;— equivalent to boolean - •TypeScript infers literal types from
const:const dir = 'north'→ type is'north' - •Using
let: type widens tostringunless you annotate
Think of it like Minecraft game modes
Minecraft's difficulty isn't 'any string' — it's exactly 'Peaceful', 'Easy', 'Normal', or 'Hard'. Literal types work the same: you define the exact allowed values and TypeScript ensures nothing else can be assigned.
How It Works
- •1. Define union of literals:
type Color = 'red' | 'green' | 'blue'; - •2. Annotate:
let bg: Color = 'red'; - •3.
bg = 'purple'→ compile error: 'purple' is not assignable to Color - •4. Function parameter:
function setTheme(theme: 'light' | 'dark'): void - •5. As const:
const THEMES = ['light', 'dark'] as const;→readonly ['light', 'dark'] - •6. Template literal types:
type Event = `on${Capitalize<string>}`
Real-World Examples
- •HTTP methods:
'GET' | 'POST' | 'PUT' | 'DELETE' - •Notification types:
'success' | 'warning' | 'error' | 'info' - •Button variants:
'primary' | 'secondary' | 'ghost' | 'destructive' - •User roles:
'admin' | 'teacher' | 'student' | 'guest'
Key Facts
- •Template literal types:
type Greeting = `Hello, ${string}`;— prefix/suffix patterns - •
as conston arrays produces a readonly tuple of literal types — useful for enums - •Literal types are erased at runtime — they're purely compile-time
- •TypeScript uses literal types internally for HTML element names, CSS property values, event names
Watch Out!
When you assign a string literal to a let variable, TypeScript widens the type to string. To keep the literal: use const, or annotate explicitly: let dir: Direction = 'north', or use as const on the value.
Remember
'a' | 'b' | 'c' = exactly these values allowed. Use for status fields, variants, modes, directions — anywhere the set of valid values is known and finite.
What You Learned
- •Literal types restrict values to specific strings/numbers/booleans — not just the base type
- •Union of literals:
'idle' | 'loading' | 'error'— TypeScript catches any other value - •Unlocks: precise API contracts, exhaustive switch checks, self-documenting type definitions
Key Facts
- →Template literal types:
type Greeting = `Hello, ${string}`;— prefix/suffix patterns - →
as conston arrays produces a readonly tuple of literal types — useful for enums - →Literal types are erased at runtime — they're purely compile-time
- →TypeScript uses literal types internally for HTML element names, CSS property values, event names
Real-World Examples
Remember
'a' | 'b' | 'c' = exactly these values allowed. Use for status fields, variants, modes, directions — anywhere the set of valid values is known and finite.
Quick Quiz
Literal type 'on' | 'off' means?