Annotations and Assertions 12 exercises
Problem

The satisfies Keyword and Deeply Read-Only Objects in TypeScript

Here we have a routes object:

const routes = {
  "/": {
    component: "Home",
  },
  "/about": {
    component: "About",
    // @ts-expect-error // red squiggly line under @ts-expect-error
    search: "?foo=bar",
  },
};

We expect that the object will have several particular charact

Loading exercise

Transcript

00:00 In this exercise, we have a Roots object, which has a kind of backslash key indicating the home, and then we have About as another key. And on it, we have Component Home and Component About. Now, we're expecting certain behavior out of this. We're expecting that when we add a search field

00:18 to this, that it should error here, so Satisfy should already be on your mind. And then, down the bottom, we should be expecting an error when we say Roots Home Component equals About, so we shouldn't be able to modify this object after we've created it. And finally,

00:36 we're expecting that when we index into it, we're expecting Roots Home Component to equal Home, and Roots About Component to equal About, instead of being inferred as their literals. So, you are going to need to find a way to combine two annotations which we've previously

00:55 used. Satisfies, and if you think back, the annotation that helps you make an object deeply read-only. Good luck!