Union and Intersection Types in TypeScript
Understand TypeScript union (A | B) and intersection (A & B) types, when each applies, type narrowing, and discriminated unions — with clear code examples.
Expected Interview Answer
A union type (A | B) means a value can be one of several types, while an intersection type (A & B) means a value must satisfy all the combined types at once.
Unions express 'either/or' — a variable of type string | number holds a string or a number, and you narrow it with type guards before using type-specific members. Intersections express 'and' — Person & Serializable produces a type that has every property of both. Unions widen the set of allowed values; intersections merge shapes into a single, stricter type.
- Model flexible inputs safely with unions
- Combine multiple contracts into one with intersections
- Enable exhaustive checking via discriminated unions
- Reduce duplication by composing existing types
- Catch invalid states at compile time
AI Mentor Explanation
A union type is a squad slot that can be filled by an all-rounder OR a specialist bowler — either is valid, but before handing them the new ball you check which one turned up. An intersection is a captain who must be both a top-six batter AND a strategist: the role demands every skill at once, not a choice between them.
Step-by-Step Explanation
Step 1
Declare a union
Use the pipe: type Id = string | number allows either type.
Step 2
Narrow before use
Apply typeof or a type guard so the compiler knows which member you have.
Step 3
Declare an intersection
Use the ampersand: type Staff = Person & Employee merges both shapes.
Step 4
Combine required members
A Staff value must supply every property from Person and Employee.
Step 5
Discriminated unions
Add a shared literal 'kind' field so switch statements narrow exhaustively.
What Interviewer Expects
- Correct 'either/or' vs 'all-of' distinction
- Use of type narrowing / type guards on unions
- Understanding of discriminated unions
- Awareness that primitive intersections can produce never
- A practical example of each
Common Mistakes
- Swapping the meanings of | and &
- Accessing a member without narrowing a union first
- Expecting string & number to be usable (it resolves to never)
- Forgetting a discriminant field in a discriminated union
Best Answer (HR Friendly)
“A union type says a value can be one of a few types — like a field that accepts either text or a number. An intersection type says a value must combine all the properties of several types at once, like merging two forms into one that needs everything filled in.”
Code Example
// Union: either a string or a number
type Id = string | number;
function printId(id: Id) {
if (typeof id === 'string') {
console.log(id.toUpperCase()); // narrowed to string
} else {
console.log(id.toFixed(0)); // narrowed to number
}
}
// Intersection: must satisfy both shapes
type Person = { name: string };
type Employee = { employeeId: number };
type Staff = Person & Employee;
const s: Staff = { name: 'Ada', employeeId: 42 }; // both required
// Discriminated union for exhaustive checks
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'square'; side: number };
function area(shape: Shape): number {
switch (shape.kind) {
case 'circle': return Math.PI * shape.radius ** 2;
case 'square': return shape.side ** 2;
}
}Follow-up Questions
- What is a discriminated (tagged) union?
- Why does 'string & number' resolve to 'never'?
- How do type guards narrow union types?
- What is the difference between an interface extends and an intersection?
- How does exhaustiveness checking work with 'never'?
MCQ Practice
1. What does the type 'A | B' mean?
A union A | B means the value is one of the constituent types — either A or B.
2. What does 'Person & Serializable' produce?
An intersection merges shapes, so the result must satisfy every property of both Person and Serializable.
3. What is the resulting type of 'string & number'?
No value can be both a string and a number at once, so the intersection collapses to 'never'.
Flash Cards
Union type meaning — A | B — the value is one of several types; narrow before using type-specific members.
Intersection type meaning — A & B — the value must satisfy all combined types simultaneously.
Discriminated union — A union whose members share a literal tag field, enabling exhaustive switch narrowing.
string & number — Resolves to 'never' — no value can be both types at once.