TypeScript 'satisfies' Operator

I recently discovered the TypeScript satisfies operator which solves a particular typing problem I’ve come across time and time again.

Let’s say we have an object where the keys are strings and the values are objects. And we know that in the future we might add another section like section3.

1
const sections = {
2
  section1: {
3
    detail1: "",
4
  },
5
  section2: {
6
    detail1: "",
7
  },
8
}

Sometimes we might want a type that is the keys of our sections object.

1
type SectionNames = keyof typeof sections
2
// The actual inferred type looks like:
3
// type SectionNames = "section1" | "section2"

Cool, now we have type called SectionNames that is very specifically one of two string literals (section1 or section2).

But wait, we want the sections object to conform to a specific shape. Specifically, we want two things:

• We want to be able to add additional sections to the object
• Each section should be an object that has the key detail1 with a string value

So we might do something like:

1
interface SectionDetails {
2
  detail1: string
3
}
4

5
const sections: Record<string, SectionDetails> = {
6
  section1: {
7
    detail1: "",
8
  },
9
  section2: {
10
    detail1: "",
11
  },
12
}

This allows us to add as many sections as we want (without having to also add the same section key to some overall Sections interface) and each section must be an object with the specified key/value pairs.

There’s a problem though. Let’s look at what our SectionNames type looks like now:

1
type SectionNames = keyof typeof sections
2
// Now section names is:
3
// type SectionNames = string

Now SectionNames is just of type string.

Because we typed sections as Record<string, SectionDetails>, TypeScript is no longer inferring the more specific type.

So the question is, how can we ensure that sections conforms to the shape we want while also having our SectionNames type be the exact keys and not just string?

This is where the satisfies operator comes in. Instead of specifying the type of sections, we say it must satisfy some type:

1
const sections = {
2
  section1: {
3
    detail1: "",
4
  },
5
  section2: {
6
    detail1: "",
7
  },
8
} satisfies Record<string, SectionDetails>
9
// Still the specific inferred type!
10
// And sections must satisfy the defined type.
11

12
type SectionNames = keyof typeof sections
13
// type SectionNames = "section1" | "section2"