How intersection combines types in Typescript - Try It Yourself

How intersection combines types

📖 Scenario: Imagine you are creating a profile system where a user can be both a Student and an Employee. You want to combine these two roles into one type that has all properties from both.

🎯 Goal: You will create two types, then combine them using an intersection type. Finally, you will create a variable of the combined type and print its properties.

📋 What You'll Learn

Create a type called Student with properties name (string) and grade (number).

Create a type called Employee with properties name (string) and salary (number).

Create an intersection type called StudentEmployee that combines Student and Employee.

Create a variable called person of type StudentEmployee with all required properties.

Print the name, grade, and salary of person.

💡 Why This Matters

🌍 Real World

Combining multiple roles or features into one object is common in user profiles, permissions, and settings in real applications.

💼 Career

Understanding intersection types helps you write flexible and safe TypeScript code, which is valuable for frontend and backend development jobs.

1

Create the Student and Employee types

Create a type called Student with properties name (string) and grade (number). Then create a type called Employee with properties name (string) and salary (number).

Typescript

# Your code here

Hint

Use type keyword to create types. Properties are written as propertyName: type;.

2

Create the intersection type StudentEmployee

Create an intersection type called StudentEmployee that combines the types Student and Employee using the & operator.

Typescript

type Student = {
    name: string;
    grade: number;
};

type Employee = {
    name: string;
    salary: number;
};

# Your code here

Hint

Use type StudentEmployee = Student & Employee; to combine both types.

3

Create a variable of type StudentEmployee

Create a variable called person of type StudentEmployee and assign it an object with name as "Alice", grade as 90, and salary as 30000.

Typescript

type Student = {
    name: string;
    grade: number;
};

type Employee = {
    name: string;
    salary: number;
};

type StudentEmployee = Student & Employee;

# Your code here

Hint

Make sure the object has all properties from both types.

4

Print the properties of person

Write a console.log statement to print the name, grade, and salary properties of the person variable.

Typescript

type Student = {
    name: string;
    grade: number;
};

type Employee = {
    name: string;
    salary: number;
};

type StudentEmployee = Student & Employee;

const person: StudentEmployee = {
    name: "Alice",
    grade: 90,
    salary: 30000
};

# Your code here

Hint

Use a template string inside console.log to show all properties.

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