v11 types: new shouldForwardProp type is overly restrictive

[grncdr]

Current behavior:

I have been trying out the new @next tags, and have run into a type error with code that previous type-checked and worked. I'm fairly certain this is due to the changes in #1624

The shouldForwardProp option is now inferred to being of type (prop: keyof Props) => prop is ForwardedProps. But this restricts prop to being one of the known props of an element type.

To reproduce:

See the code sandbox for an example that used to work and now fails

Expected behavior:

I think that the argument to shouldForwardProp should always just be a string, since at the moment styled is called, we don't know what additional props the component might accept.

Environment information:

• Typescript 3.6.2
• Emotion libs @next (see codepen for exact versions)
• @types/react 16.9.4

[grncdr]

cc @JakeGinnivan

I don't think this issue is very severe: one can explicitly annotate the shouldForwardProp callback to work around it:

styled('div', {
  shouldForwardProp: (prop: string) => ...
})(...)

[JakeGinnivan]

Ah I see, the prop is added to the types after the create styled. Good point.

Thoughts on if it should allow string or PropertyKey. I guess that comes down to if my type had symbol/number based keys, would isValidProp be able to handle it.

[Andarist]

string is IMHO fine, both numbers and symbol are technically allowed, but I havent ever seen them used as props keys

[JakeGinnivan]

Giving it a go, PropertyKey is actually simpler from a types point of view. Otherwise I need to use Extract<keyof Props, string> instead of keyof Props

[Andarist]

We believe this got fixed by #1643, once we release a new version please take a look to check out it this resolved your issue.