Intersection type syntax in Typescript - Mini Project: Build & Apply

Understanding Intersection Type Syntax in TypeScript

📖 Scenario: Imagine you are building a simple user profile system where some users have both employee and manager roles. You want to combine their properties using TypeScript's intersection types.

🎯 Goal: Learn how to create and use intersection types in TypeScript by combining two interfaces and creating an object that has properties from both.

📋 What You'll Learn

Create two interfaces with specific properties

Create an intersection type combining the two interfaces

Create an object of the intersection type with all required properties

Print the combined object to the console

💡 Why This Matters

🌍 Real World

Intersection types help combine multiple object types into one, useful in real-world apps where objects have multiple roles or features.

💼 Career

Understanding intersection types is important for TypeScript developers working on complex applications with rich data models.

1

Create two interfaces

Create an interface called Employee with properties id (number) and name (string). Then create another interface called Manager with properties department (string) and reports (number).

Typescript

# Your code here

Hint

Use the interface keyword to define each type with the exact property names and types.

2

Create an intersection type

Create a new type called EmployeeManager that is the intersection of Employee and Manager using the & symbol.

Typescript

interface Employee {
  id: number;
  name: string;
}

interface Manager {
  department: string;
  reports: number;
}

# Your code here

Hint

Use type EmployeeManager = Employee & Manager; to combine the two interfaces.

3

Create an object of the intersection type

Create a constant called employeeManager of type EmployeeManager and assign it an object with all four properties: id, name, department, and reports. Use these exact values: id: 101, name: "Alice", department: "Sales", reports: 5.

Typescript

interface Employee {
  id: number;
  name: string;
}

interface Manager {
  department: string;
  reports: number;
}

type EmployeeManager = Employee & Manager;

# Your code here

Hint

Make sure to include all properties from both interfaces in the object.

4

Print the combined object

Write a console.log statement to print the employeeManager object to the console.

Typescript

interface Employee {
  id: number;
  name: string;
}

interface Manager {
  department: string;
  reports: number;
}

type EmployeeManager = Employee & Manager;

const employeeManager: EmployeeManager = {
  id: 101,
  name: "Alice",
  department: "Sales",
  reports: 5
};

# Your code here

Hint

Use console.log(employeeManager); to display the object.

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