Mutability 12 exercises
Problem

Deeply Apply Read-only Properties to an Object in TypeScript

Here we have the same setup as before: a modifyButton function that takes in an object of buttonAttributes which expects a type of ButtonAttributes containing either "button", "submit" or "reset":


type ButtonAttributes = {
type: "button" | "submit" | "reset";
};
const modifyButton

Loading exercise

Transcript

00:00 Okay, we have a very similar setup to what we had before, which is we have a modifyButton function which takes in some attributes. These attributes are typed as button attributes, so type button, submit or reset. Then we have a const down here of button attributes, and it says type button in there, but when we pass that into our function, it's not working because argument of type string

00:19 is not assignable to parameter of type button attributes. Very annoying, and the reason this is happening is because buttonAttributes.type is mutable. Now, we found a solution to this before, which was all about adding an extra type annotation to button attributes. That worked fine, but there's a kind of more interesting way

00:39 that leads into a really, really cool piece of TS syntax. We would be able to basically get the annotation right or get the inference right if we could just say to TypeScript, treat this entire button attributes const here as if none of the properties inside can be changed.

00:58 So make the whole thing kind of like read-only deeply. Your job is to try to find that annotation and see if you can apply it to these button attributes. So now, you basically, these are the only lines of code you're allowed to work on, the const button attributes equals type button, and you're not allowed to use the button attributes type

01:18 in order to do it. There is such a cool way to do it. Good luck.