Union vs intersection mental model in Typescript - Visual Side-by-Side Comparison

Concept Flow - Union vs intersection mental model

Start with Type A

↓

Union: A | B

↓

Intersection: A & B

↓

Use in code to allow flexible or strict types

Union types allow values from either type, intersection types require values to satisfy both types.

Execution Sample

Typescript

type A = { name: string };
type B = { age: number };

let union: A | B = { name: "Alice" };
let intersection: A & B = { name: "Bob", age: 30 };

Shows a union type allowing either A or B, and an intersection type requiring both A and B properties.

Execution Table

Step	Variable	Type	Value	Explanation
1	union	A | B	{ name: "Alice" }	Assign object with only 'name' property, valid for union type
2	union	A | B	{ age: 25 }	Assign object with only 'age' property, also valid for union type
3	union	A | B	{ name: "Eve", age: 40 }	Assign object with both properties, valid for union type
4	intersection	A & B	{ name: "Bob", age: 30 }	Assign object with both 'name' and 'age', required for intersection type
5	intersection	A & B	{ name: "Carol" }	Error: missing 'age' property, invalid for intersection type
6	intersection	A & B	{ age: 22 }	Error: missing 'name' property, invalid for intersection type

💡 Execution stops because intersection type requires all properties from both types, union allows either.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6
union	undefined	{ name: "Alice" }	{ age: 25 }	{ name: "Eve", age: 40 }	-	-	-
intersection	undefined	-	-	-	{ name: "Bob", age: 30 }	Error	Error

Key Moments - 3 Insights

Why can the union type variable hold an object with only 'name' or only 'age'?

Because union types allow values to be from either type A or type B, so having just one property from either is valid as shown in execution_table rows 1 and 2.

Why does the intersection type variable require both 'name' and 'age' properties?

Intersection types combine both types, so the value must have all properties from A and B, which is why rows 5 and 6 show errors when properties are missing.

Can the union type variable hold an object with both 'name' and 'age'?

Yes, union types accept values from either type, so an object with both properties is valid as in row 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'union' at step 2?

A { name: "Alice" }

B { age: 25 }

C { name: "Eve", age: 40 }

D Error

💡 Hint

Check the 'Value' column for 'union' at step 2 in the execution_table.

At which step does the 'intersection' variable get assigned a valid value?

A Step 4

B Step 5

C Step 6

D None

💡 Hint

Look for the first step where 'intersection' has a non-error value in the execution_table.

If we remove the 'age' property from the intersection object at step 4, what happens?

A It becomes valid as a union type

B It causes an error for intersection type

C It is valid for both union and intersection types

D It causes an error for union type

💡 Hint

Refer to execution_table rows 5 and 6 where missing properties cause errors for intersection.

Concept Snapshot

Union (A | B): value can be from type A or type B.
Intersection (A & B): value must have all properties from both A and B.
Union is flexible, intersection is strict.
Use union for alternatives, intersection for combined requirements.
Example: let u: A | B; let i: A & B;

Full Transcript

This visual execution shows how union and intersection types work in TypeScript. Union types allow a variable to hold a value from either type, so it can have properties from A or B or both. Intersection types require the variable to have all properties from both types, so missing any property causes an error. The execution table traces assignments step-by-step, showing valid and invalid cases. The variable tracker highlights how values change or cause errors. Key moments clarify why union is flexible and intersection is strict. The quiz tests understanding by referencing specific steps and values. The snapshot summarizes the core difference and usage of union and intersection types.