Union & Literal Types (basic narrowing intro)
Combine types with unions, use literal types for exact values, and apply basic narrowing.
Union & Literal Types (basic narrowing intro) is a free TypeScript Academy lesson on CoddyKit — lesson 3 of 3. 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 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Intro
Goal: Learn how to combine multiple types with union and restrict values with literal types. These help create safer APIs.
Union basics
Union types use | to allow one of several types. Here: string or number.
let value: string | number;
value = "hello";
value = 42;
// value = true;
// Error, not allowedLiteral types
Literal types restrict values to exact options. Common for configs and enums.
let direction: "left" | "right";
direction = "left";
// direction = "up";
// ErrorNarrowing basics
Narrowing checks the runtime type (e.g., typeof) to safely access members.
function printId(id: string | number) {
if (typeof id === "string") {
console.log(id.toUpperCase());
} else {
console.log(id.toFixed(2));
}
}
printId("abc");
printId(123.456);
Discriminated unions
Discriminated unions combine literal tags with objects. Narrowing on kind makes TypeScript smart.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; size: number };
function area(shape: Shape): number {
if (shape.kind === "circle") {
return Math.PI * shape.radius ** 2;
} else {
return shape.size * shape.size;
}
}
console.log(area({ kind: "circle", radius: 2 }));
console.log(area({ kind: "square", size: 3 }));
Why unions & literals
Why use unions & literals? They make invalid states impossible, guide autocomplete, and let the compiler catch mistakes earlier.
Union check
Quick check: What is a union type?
Recap
Recap: Use | for unions, literal types for exact values, and narrowing to branch safely. These tools make TS expressive and safe.
Frequently asked questions
Is the “Union & Literal Types (basic narrowing intro)” lesson free?
Yes — the full text of “Union & Literal Types (basic narrowing intro)” is free to read here on the web, and the TypeScript Academy course includes 3 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 “Union & Literal Types (basic narrowing intro)”?
Combine types with unions, use literal types for exact values, and apply basic narrowing. 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 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Union & Literal Types (basic narrowing intro)” 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
- Primitive Types & Annotations
- Type Inference & any vs unknown
- Union & Literal Types (basic narrowing intro)