How intersection combines types in Typescript

Introduction

Intersection types let you combine multiple types into one. This helps you create a new type that has all the features of the combined types.

When you want an object to have properties from two or more types at the same time.

When you want to make sure a value meets multiple type requirements.

When combining different interfaces to create a more specific type.

When you want to add extra properties to an existing type without changing it.

Syntax

Typescript

type NewType = TypeA & TypeB;

The & symbol means intersection.

The new type has all properties from both TypeA and TypeB.

Examples

This creates Employee with both name and job properties.

Typescript

type Person = { name: string };
type Worker = { job: string };
type Employee = Person & Worker;

Type C has both a and b properties.

Typescript

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

Type Z combines three types, so it has x, y, and z.

Typescript

type X = { x: boolean };
type Y = { y: boolean };
type Z = X & Y & { z: number };

Sample Program

This program creates an Employee type by combining Person and Contact. Then it makes an object with both name and email. Finally, it prints both values.

Typescript

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

const employee: Employee = {
  name: "Alice",
  email: "[e-mail]"
};

console.log(`Name: ${employee.name}`);
console.log(`Email: ${employee.email}`);

Important Notes

If two types have the same property with different types, the intersection will require the property to satisfy both types, which can cause errors.

Intersection types are different from union types (|), which mean either one type or another.

Summary

Intersection types combine multiple types into one that has all their properties.

Use & to create intersection types.

They help make sure values meet all combined type requirements.

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