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

Need a 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

Need a 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

Need a 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

Need a hint?

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