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.

Practice

1. What does the TypeScript intersection type A & B represent?

easy

A. A type that excludes properties from A and B

B. A type that has properties from either A or B, but not both

C. A type that only has properties common to both A and B

D. A type that has all properties from both A and B

Solution

1. Step 1: Understand intersection type meaning

   Intersection A & B means the type must satisfy both A and B simultaneously.

2. Step 2: Combine properties of A and B

   The resulting type includes all properties from A and all from B, so it has everything both define.

3. Final Answer:

   A type that has all properties from both A and B -> Option D

4. Quick Check:

   Intersection = all combined properties [OK]

Hint: Intersection means all properties combined, not just one [OK]

Common Mistakes:

• Thinking intersection means either/or properties
• Confusing intersection with union types
• Assuming intersection only keeps common properties

2. Which of the following is the correct syntax to create an intersection type of TypeA and TypeB in TypeScript?

easy

A. type Combined = TypeA & TypeB;

B. type Combined = TypeA | TypeB;

C. type Combined = TypeA + TypeB;

D. type Combined = TypeA && TypeB;

Solution

1. Step 1: Recall intersection operator

   In TypeScript, the intersection operator is & to combine types.

2. Step 2: Check each option's syntax

   type Combined = TypeA & TypeB; uses & correctly. type Combined = TypeA | TypeB; uses union |, C and D use invalid operators for types.

3. Final Answer:

   type Combined = TypeA & TypeB; -> Option A

4. Quick Check:

   Intersection uses & operator [OK]

Hint: Use & for intersection, | for union types [OK]

Common Mistakes:

• Using | instead of & for intersection
• Using logical operators like && or +
• Confusing syntax with other languages

3. Given the following code, what is the type of variable person?

type Name = { name: string };
type Age = { age: number };

const person: Name & Age = { name: "Alice", age: 30 };

medium

A. { age: number }

B. { name: string; age: number }

C. { name: string }

D. Error: incompatible types

Solution

1. Step 1: Understand intersection of Name and Age

   The intersection Name & Age means the type must have both name and age properties.

2. Step 2: Check the assigned object

   The object has name: "Alice" and age: 30, matching both types.

3. Final Answer:

   { name: string; age: number } -> Option B

4. Quick Check:

   Intersection type has all combined properties [OK]

Hint: Intersection combines all properties into one type [OK]

Common Mistakes:

• Thinking it only has one of the properties
• Expecting a type error for combining
• Confusing with union type behavior

4. Identify the error in this TypeScript code using intersection types:

type A = { x: number };
type B = { y: string };

const obj: A & B = { x: 10 };

medium

A. Property 'x' should be a string, not number

B. Type A and B cannot be intersected

C. Missing property 'y' from type B in the object

D. Syntax error in type declaration

Solution

1. Step 1: Check intersection requirements

   Type A & B requires properties from both A and B, so both x and y must be present.

2. Step 2: Inspect the object literal

   The object only has x: 10 but is missing y, so it does not satisfy the intersection type.

3. Final Answer:

   Missing property 'y' from type B in the object -> Option C

4. Quick Check:

   Intersection needs all properties present [OK]

Hint: Check all properties from both types are present [OK]

Common Mistakes:

• Assuming partial properties satisfy intersection
• Thinking intersection merges only common keys
• Ignoring missing properties in object assignment

5. You have two types:
type Contact = { email: string; phone: string | null };
type Personal = { name: string; phone: string };
What is the type of info in this code?

const info: Contact & Personal = {
  name: "Bob",
  email: "[e-mail]",
  phone: "123-456"
};

hard

A. { name: string; email: string; phone: string }

B. { name: string; email: string; phone: string | null }

C. Error because phone types conflict (string | null) & string

D. { name: string; email: string }

Solution

1. Step 1: Analyze intersection of Contact and Personal

   The phone property is string | null in Contact and string in Personal. Intersection requires a type assignable to both, which is string.

2. Step 2: Check the object assigned

   The object has name, email, and phone as a string, matching the intersection type.

3. Step 3: Determine final type

   The combined type has name: string, email: string, and phone: string (the stricter type).

4. Final Answer:

   { name: string; email: string; phone: string } -> Option A

5. Quick Check:

   Intersection narrows overlapping types [OK]

Hint: Intersection narrows overlapping types to common subtype [OK]

Common Mistakes:

• Assuming union of phone types instead of intersection
• Expecting error due to different phone types
• Ignoring type narrowing in intersections