DEV Community

Petr Tcoi
Petr Tcoi

Posted on

A small example of how to use the satisfies operator in TypeScript

The satisfies operator tells TS what type of variable we expect, without overriding its own type. In some cases, this feature can be very useful. Let's look at a simple example where this operator can be useful.

We have a list of products listA and we need to prepare an object whose keys would be arbitrary strings and whose values would be any of the items in the list.

const listA = ['apples', 'oranges', 'peaches'] as const;

type ListA = (typeof listA)[number]; // "apples" | "oranges" | "peaches"

const listMap1: Record<string, ListA> = {
  a: 'apples',
  b: 'oranges',
  c: 'peaches',
  d: 'apples',
};
Enter fullscreen mode Exit fullscreen mode

If we try to specify a value that is not in the list, for example carrot, we get a warning, which was necessary.

Now we need to infer the type of the keys contained in the listMap1 object. And here we have a problem, because at the very beginning we defined its type as Record<string, ListA>. This means that the key is an arbitrary string:

type Key1 = keyof typeof listMap1;

const keyOne: Key1 = 'Y';  // const keyOne: string
Enter fullscreen mode Exit fullscreen mode

We don't get an error, although we should. This is where the satisfies operator comes in handy, telling TS that we don't define the type of the variable, but just expect the keys to be strings and the values to be something from the fruit list.

const listMap2 = {
  a: 'apples',
  b: 'oranges',
  c: 'peaches',
  d: 'apples',
} satisfies Record<string, ListA>;
Enter fullscreen mode Exit fullscreen mode

In this case, the above code will work as it should:

type Key2 = keyof typeof listMap2;

const keyTwo: Key2 = 'Y'; // const keyTwo: "a" | "b" | "c" | "d"
Enter fullscreen mode Exit fullscreen mode

we get the error Type '"Y"' is not assignable to type '"a" | "b" | "c" | "d", which is what we needed.

Top comments (0)