How intersection combines types in Typescript - Quick Revision & Summary

Recall & Review

beginner

What does an intersection type do in TypeScript?

An intersection type combines multiple types into one. The new type has all properties and methods from each combined type.

beginner

How do you write an intersection type in TypeScript?

Use the & symbol between types. For example: type A = B & C; means A has all properties of B and C.

intermediate

What happens if two intersected types have properties with the same name but different types?

TypeScript requires the property to satisfy both types. If they conflict, the intersection becomes impossible to satisfy and causes an error or results in the never type.

beginner

Example: What properties does this type have?
type A = {name: string};
type B = {age: number};
type C = A & B;

Type C has both name (string) and age (number) properties. It combines all properties from A and B.

intermediate

Can intersection types combine primitive types like string & number?

No. Intersection of incompatible primitive types like string & number results in never, meaning no value can satisfy both.

What symbol is used to create an intersection type in TypeScript?

A &

B |

C +

D *

The & symbol combines types into an intersection type.

If type A = {x: number} and type B = {y: string}, what properties does A & B have?

A Only x

B Only y

C Both x and y

D Neither x nor y

Intersection combines all properties, so it has both x and y.

What happens if two intersected types have the same property name but different types?

A TypeScript merges them as a union

B TypeScript picks the first type

C TypeScript ignores one property

D TypeScript throws an error or results in never

Conflicting property types cause an error or never type.

What is the result of string & number in TypeScript?

A never

B number

C string

D string | number

Intersection of incompatible primitives results in never.

Which of these is a valid intersection type?

A type C = {a: number} + {b: string};

B type C = {a: number} & {b: string};

C type C = {a: number} | {b: string};

D type C = {a: number} - {b: string};

Only & creates intersection types.

Explain in your own words how intersection types combine multiple types in TypeScript.

Think about how two sets of properties join together.

Describe what happens when two intersected types have the same property name but different types.

Consider if a property must be both a string and a number at the same time.

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