Previous

Intersection Types in TypeScript

Intersection types in TypeScript allow you to combine multiple types into a single type. This enables you to create a type that has all the properties of multiple types. Intersection types are useful when you want a variable or object to fulfill multiple contracts simultaneously.

 

Key Concepts of Intersection Types

  • Definition: An intersection type is created by combining multiple types using the & (ampersand) operator.
  • Use Case: Intersection types are ideal when you want a type that has all the properties of two or more existing types.
  • Type Safety: TypeScript ensures that the variable conforms to all the types in the intersection, providing strict type checks.

 

Example Usage of Intersection Types

Example 1: Basic Intersection Type

type Person = {
  name: string;
  age: number;
};

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

type EmployeeDetails = Person & Employee;

let employee: EmployeeDetails = {
  name: "John",
  age: 30,
  role: "Developer",
  salary: 80000,
};

In this example:

  • Person and Employee are combined using the & operator to form the EmployeeDetails type.
  • The employee variable must have all properties from both Person and Employee, including name, age, role, and salary.

Example 2: Intersection with Multiple Types

type Address = {
  street: string;
  city: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type FullContact = Address & ContactInfo;

let contact: FullContact = {
  street: "123 Main St",
  city: "New York",
  email: "[email protected]",
  phone: "123-456-7890",
};

Here, the FullContact type is an intersection of Address and ContactInfo. The contact variable must include all properties from both types: street, city, email, and phone.

Example 3: Intersection with Interfaces

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

interface Price {
  price: number;
}

type ProductDetails = Product & Price;

let product: ProductDetails = {
  id: 101,
  name: "Laptop",
  price: 1200,
};

In this case, the ProductDetails type combines two interfaces, Product and Price, so the product object must include all the properties from both interfaces.

 

Combining Classes with Intersection Types

Intersection types can also be used with classes, allowing you to combine multiple class types into one.

class Car {
  make: string;
  model: string;

  constructor(make: string, model: string) {
    this.make = make;
    this.model = model;
  }

  drive() {
    console.log("Driving a car.");
  }
}

class Electric {
  batteryLife: number;

  constructor(batteryLife: number) {
    this.batteryLife = batteryLife;
  }

  charge() {
    console.log("Charging electric car.");
  }
}

type ElectricCar = Car & Electric;

let tesla: ElectricCar = {
  make: "Tesla",
  model: "Model S",
  batteryLife: 100,
  drive() {
    console.log("Driving a Tesla.");
  },
  charge() {
    console.log("Charging Tesla.");
  },
};

In this example, ElectricCar combines the properties and methods of both Car and Electric classes. The tesla object must include all methods and properties from both classes.

 

Using Intersection Types with Functions

You can also combine multiple function types using intersection types.

type Greet = (name: string) => void;
type Farewell = (name: string) => void;

type Greeting = Greet & Farewell;

const greetAndFarewell: Greeting = (name) => {
  console.log(`Hello, ${name}!`);
  console.log(`Goodbye, ${name}!`);
};

greetAndFarewell("John");

In this case, the Greeting type is an intersection of the Greet and Farewell function types. The greetAndFarewell function must match both function signatures.

 

Type Narrowing with Intersection Types

Intersection types often require type narrowing to determine which specific type you are working with, especially when dealing with objects that may have overlapping properties.

type Admin = {
  role: string;
  permissions: string[];
};

type User = {
  username: string;
  email: string;
};

type AdminUser = Admin & User;

function printUserInfo(user: AdminUser) {
  console.log(`Username: ${user.username}`);
  console.log(`Role: ${user.role}`);
}

const adminUser: AdminUser = {
  username: "admin123",
  email: "[email protected]",
  role: "Admin",
  permissions: ["read", "write"],
};

printUserInfo(adminUser);

In this example, the AdminUser type is an intersection of Admin and User. Both sets of properties are required, and you can access both username and role within the function.

 

Summary

  • Intersection Types combine multiple types into one, requiring the resulting type to have all the properties and methods of the combined types.
  • You can create intersection types using the & operator.
  • They are useful when you want an object or variable to conform to multiple contracts at once.
  • TypeScript ensures that the combined type must include all properties from the intersected types, providing type safety.
Previous