Advanced Props 12 exercises

Ensuring Correct Inference for Prop Types

In this exercise, we're dealing with a TypeScript issue involving the buttonProps object.

This object has a type of "button" and also contains an illegalProperty.

const buttonProps = {
type: "button";
// @ts-expect-error (not currently an error)
illegalProperty: strin

Loading exercise


00:00 For this exercise, we have a ButtonProps object here with a type of button and an illegal property and we are spreading that button or these ButtonProps into this button here. There is a massive error that's happening here and I'd like you to try and diagnose the error to try and figure out what's going on.

00:17 Make sure you read towards the end of the error because that's probably where the actual useful stuff is going to be. And we're also looking here to make sure that ButtonPropType down the bottom is inferred as button, not string or not button or submit or reset, just literally button.

00:35 So that's your job and there's a few things that you're going to be able to try here. There's actually maybe like four different solutions but only one of them actually works completely because we want to make sure that this property is erroring because we're actually expecting an error in there.

00:52 We want to make sure this error goes away and we want to make sure this is being inferred as literally button. So there's also a little helper up there which might end up being useful. There's going to be a new keyword actually in the solution that we've not covered before. So make sure you check in the resources below just to get some hints if you need them.

01:11 And I'll walk through all of the different potential ways you could solve this problem in the solution.

01:16 Good luck!