Intersection type syntax in Typescript - Step-by-Step Execution

Concept Flow - Intersection type syntax

Define Type A

↓

Define Type B

↓

Use & to combine

↓

Create variable of combined type

↓

Access properties from both A and B

↓

Use variable safely with all properties

Intersection types combine multiple types into one that has all properties from each type.

Execution Sample

Typescript

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

const person: A & B = { name: "Alice", age: 30 };

console.log(person.name, person.age);

This code creates a variable with properties from both types A and B using intersection.

Execution Table

Step	Action	Evaluation	Result
1	Define type A	A = { name: string }	Type A created
2	Define type B	B = { age: number }	Type B created
3	Create variable person with type A & B	person = { name: "Alice", age: 30 }	person has name and age
4	Access person.name	person.name	"Alice"
5	Access person.age	person.age	30
6	Print person.name and person.age	console.log(person.name, person.age)	Output: Alice 30

💡 All steps complete, variable person has combined properties from A and B.

Variable Tracker

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

Key Moments - 2 Insights

Why can person have both name and age properties?

Because person is typed as A & B, it must have all properties from both types, as shown in execution_table step 3.

What happens if person misses one property from A or B?

TypeScript will give an error because intersection requires all properties, so missing any property breaks the type, as implied by step 3.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what properties does person have?

A Only name

B Both name and age

C Only age

D Neither name nor age

💡 Hint

Check the 'Result' column in step 3 of execution_table.

At which step do we see the output printed to the console?

A Step 4

B Step 5

C Step 6

D Step 2

💡 Hint

Look for console.log action in execution_table.

If we remove age from person in step 3, what will happen?

A TypeScript error because age is missing

B No error, code runs fine

C person will have age as undefined

D person will only have name property

💡 Hint

Refer to key_moments about missing properties in intersection types.

Concept Snapshot

Intersection types combine multiple types using &.
Syntax: type Combined = Type1 & Type2;
Variables must have all properties from each type.
Useful to merge object shapes safely.
TypeScript checks all properties exist.

Full Transcript

This visual trace shows how intersection types work in TypeScript. First, two types A and B are defined with different properties. Then, a variable person is created with type A & B, meaning it must have all properties from both types. The variable is assigned an object with name and age. Accessing person.name and person.age works because both exist. The console.log prints both values. If any property is missing, TypeScript will give an error. This ensures variables have combined properties safely.

Practice

1.

What does the intersection type type AB = A & B; mean in TypeScript?

easy

A. It creates a new type that excludes properties from A and B.

B. It creates a union type that can be either A or B.

C. It combines types A and B so the result has all properties from both.

D. It merges A and B but only keeps properties common to both.

Solution

1. Step 1: Understand intersection operator &

   The & symbol in TypeScript creates an intersection type combining all properties from both types.

2. Step 2: Compare with union and other operations

   Unlike union (|), intersection requires all properties from both types to be present.

3. Final Answer:

   It combines types A and B so the result has all properties from both. -> Option C

4. Quick Check:

   Intersection = all properties combined [OK]

Hint: Intersection uses & to combine all properties [OK]

Common Mistakes:

• Confusing intersection (&) with union (|)
• Thinking intersection keeps only common properties
• Assuming intersection excludes properties

2.

Which of the following is the correct syntax to define an intersection type of Person and Employee?

easy

A. type Staff = Person | Employee;

B. type Staff = Person & Employee;

C. type Staff = Person, Employee;

D. type Staff = Person && Employee;

Solution

1. Step 1: Recall intersection syntax

   Intersection types use the & symbol to combine types.

2. Step 2: Check each option

   type Staff = Person & Employee; uses & correctly for intersection. type Staff = Person | Employee; uses union |. Comma is invalid syntax. && is a logical operator, not type syntax.

3. Final Answer:

   type Staff = Person & Employee; -> Option B

4. Quick Check:

   Intersection syntax = & [OK]

Hint: Use & to join types for intersection [OK]

Common Mistakes:

• Using | instead of & for intersection
• Using commas or && which are invalid
• Confusing logical operators with type operators

3.

What is the type of variable user after this code?

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

const user: A & B = { name: "Alice", age: 30 };

medium

A. Error: incompatible types

B. { age: number }

C. { name: string }

D. { name: string; age: number }

Solution

1. Step 1: Understand intersection type A & B

   The type A & B combines properties from both A and B, so it must have name and age.

2. Step 2: Check the assigned object

   The object has both name: "Alice" and age: 30, matching the intersection type.

3. Final Answer:

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

4. Quick Check:

   Intersection type = combined properties [OK]

Hint: Intersection type has all properties combined [OK]

Common Mistakes:

• Thinking intersection keeps only one type's properties
• Expecting a type error when all properties are present
• Confusing intersection with union

4.

Identify the error in this TypeScript code using intersection types:

type X = { a: number };
type Y = { b: string };

const obj: X & Y = { a: 5 };

medium

A. Missing property 'b' from type Y in the object.

B. Incorrect use of & operator for intersection.

C. Property 'a' should be a string, not number.

D. Object should use union type | instead of &.

Solution

1. Step 1: Check required properties for intersection X & Y

   The intersection requires all properties from both X and Y, so both a and b must be present.

2. Step 2: Inspect the object literal

   The object only has a: 5 but is missing b, causing a type error.

3. Final Answer:

   Missing property 'b' from type Y in the object. -> Option A

4. Quick Check:

   Intersection requires all properties present [OK]

Hint: Intersection needs all properties present in object [OK]

Common Mistakes:

• Forgetting to include all properties in intersection
• Confusing intersection with union allowing partial properties
• Misusing & operator syntax

5.

Given these types, which is the correct way to define a variable fullInfo that must have all properties from Person, Employee, and Contact?

type Person = { name: string };
type Employee = { id: number };
type Contact = { email: string };

hard

A. const fullInfo: Person & Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" };

B. const fullInfo: Person | Employee | Contact = { name: "Bob", id: 1, email: "[e-mail]" };

C. const fullInfo: Person & Employee | Contact = { name: "Bob", id: 1, email: "[e-mail]" };

D. const fullInfo: Person | Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" };

Solution

1. Step 1: Understand combining multiple types

   To require all properties from Person, Employee, and Contact, use intersection of all three types with &.

2. Step 2: Analyze each option

   const fullInfo: Person & Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" }; correctly uses Person & Employee & Contact. const fullInfo: Person | Employee | Contact = { name: "Bob", id: 1, email: "[e-mail]" }; uses union which allows any one type only. Mixing union and intersection incorrectly.

3. Final Answer:

   const fullInfo: Person & Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" }; -> Option A

4. Quick Check:

   All properties require intersection & [OK]

Hint: Use & to combine multiple types for all properties [OK]

Common Mistakes:

• Using union | instead of intersection & for all properties
• Mixing union and intersection without parentheses
• Assuming union requires all properties