Advanced Props 12 exercises

Inference from a Single Source of Truth

In this exercise, we're going to bring together several of the TypeScript concepts that we've seen so far.

Here we've got a buttonPropsMap object, which contains various button variants organized into three categories: reset, submit, and next:

const buttonPropsMap = {

Loading exercise


00:00 In this exercise, we're combining a few things that we've learned together. We have this button props map kind of object here, which has a bunch of different variants of buttons. So we have our reset button, our submit button and our next button, like in a multi-step form. And in our button props, we're taking that variance and we're putting them in here.

00:19 But there's an error kind of below here where we're not getting the right types in, it seems. So your job is to figure out what this error is. We also want to make sure we retain this kind of next reset and submit thing. And we want to make sure that these illegal properties start erroring.

00:38 So you're going to need to find a type, again, possibly using component props and using some other stuff that we've seen before, to type button props map correctly so that we get rid of these errors, get rid of this error, and we still get the nice autocomplete below.