How intersection combines types in Typescript - Visual Walkthrough

Concept Flow - How intersection combines types

Type A

↓

Intersection Type

↓

Combined properties of A and B

Intersection takes two types and creates a new type that has all properties from both types.

Execution Sample

Typescript

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

const person: C = { name: "Alice", age: 30 };

Defines two types A and B, then combines them with intersection to create type C having both properties.

Execution Table

Step	Action	Evaluation	Result
1	Define type A	A = { name: string }	Type A created with property name:string
2	Define type B	B = { age: number }	Type B created with property age:number
3	Create intersection type C = A & B	C has properties of A and B combined	C = { name: string, age: number }
4	Declare variable person of type C	person must have name:string and age:number	person = { name: "Alice", age: 30 }
5	Access person.name	person.name is string	"Alice"
6	Access person.age	person.age is number	30
7	Try to assign person missing age	Error: age missing	TypeScript error
8	Try to assign person missing name	Error: name missing	TypeScript error

💡 Execution stops after type errors prevent invalid assignments

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
person	undefined	undefined	undefined	{ name: "Alice", age: 30 }	{ name: "Alice", age: 30 }

Key Moments - 3 Insights

Why does person need both name and age properties?

Because the intersection type C combines A and B, person must have all properties from both types, as shown in execution_table row 3 and 4.

What happens if we try to create a person without one property?

TypeScript shows an error because the intersection requires all properties, as seen in execution_table rows 7 and 8.

Does intersection merge properties or overwrite them?

It merges properties from both types, so the resulting type has all properties combined, as in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution table, what properties does type C have at step 3?

A { name: string }

B { name: string, age: number }

C { age: number }

D {}

💡 Hint

Check execution_table row 3 under Result column

At which step does TypeScript show an error for missing properties?

A Step 7

B Step 4

C Step 5

D Step 6

💡 Hint

Look at execution_table rows 7 and 8 for errors

If type B also had a property name:string, what would happen to type C?

A C would have one name property from A only

B C would have two name properties causing error

C C would have name:string property from both merged as one

D C would ignore name property

💡 Hint

Intersection merges properties; duplicate property types merge as one

Concept Snapshot

Intersection types combine multiple types into one.
Syntax: type C = A & B;
Result: C has all properties from A and B.
Variables of type C must have all combined properties.
Missing any property causes a TypeScript error.

Full Transcript

This visual execution shows how TypeScript intersection types combine two types into one. First, type A with property name:string and type B with property age:number are defined. Then, type C is created as the intersection A & B, which means C has both name and age properties. A variable person of type C must have both properties. Accessing person.name and person.age works as expected. Trying to assign person without one of these properties causes a TypeScript error. Intersection merges properties from both types, requiring all to be present.