Understanding the satisfies Operator in TypeScript

Table of contents

What is the satisfies Operator?

The satisfies operator is used to define and check complex relationships between types in TypeScript. It allows developers to express conditions under which a type is considered to satisfy another type. This operator enhances the expressiveness of TypeScript’s type system and enables developers to create more flexible and reusable code.

type TypeA satisfies TypeB = /* type definition */;

Here, TypeA is said to satisfy TypeB if the specified conditions within the type definition are met.

Basic Usage

Let’s start with a simple example to illustrate the basic usage of the satisfies operator.

type Fruit = {
  name: string;
  color: string;
};

type Apple satisfies Fruit = {
  name: 'Apple';
  color: 'red' | 'green';
  taste: 'sweet';
};

In this example, we declare a Fruit type with properties name and color. Then, we define an Apple type that satisfies the Fruit type by extending it with an additional property taste. Now, any variable of type Apple is also considered to be of type Fruit.

const myApple: Apple = {
  name: "Apple",
  color: "red",
  taste: "sweet",
};

const myFruit: Fruit = myApple; // Valid assignment

Conditional Relationships

The satisfies operator can be used to express conditional relationships between types. Consider the following example.

type Vehicle = {
  type: 'car' | 'bike';
  wheels: number;
};

type LuxuryCar satisfies Vehicle = {
  type: 'car';
  wheels: 4;
  features: 'leather seats' | 'sunroof';
};

type BasicBike satisfies Vehicle = {
  type: 'bike';
  wheels: 2;
  gears: 'single-speed' | 'multi-speed';
};

Here, we define a Vehicle type with properties type and wheels. We then declare two types, LuxuryCar and BasicBike, that satisfy the Vehicle type under specific conditions. The LuxuryCar type is applicable to cars with four wheels and additional features, while the BasicBike type is applicable to bikes with two wheels and different gear options.

const myCar: LuxuryCar = {
  type: "car",
  wheels: 4,
  features: "sunroof",
};

const myBike: BasicBike = {
  type: "bike",
  wheels: 2,
  gears: "multi-speed",
};

Intersection of Types

The satisfies operator can also be used to express that a type is an intersection of other types. Consider the following example.

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

type Employee satisfies Person = {
  role: string;
};

type Manager satisfies (Employee & Person) = {
  department: string;
};

Here, we declare a Person type with properties name and age. We then define an Employee type that satisfies the Person type by adding a role property. Finally, the Manager type satisfies both Employee and Person types, forming an intersection.

const myManager: Manager = {
  name: "John",
  age: 35,
  role: "Manager",
  department: "Engineering",
};

Conclusion

The satisfies operator in TypeScript provides a powerful way to express complex type relationships, making the type system more flexible and expressive. By using this operator, developers can create types that not only extend existing types but also introduce conditional and intersection relationships, leading to more robust and reusable code. Understanding and effectively using the satisfies operator can significantly enhance the development experience in TypeScript.