[docs] Add simple list typescript demo #14485
Conversation
It's already a pretty challenging demo if one wants to infer what DOM node will actually be rendered and therefore what DOM attributes are allowed. `button` would render a button but the component overrides that again...
eps1lon
force-pushed
the
docs/list-demos-in-ts
branch
from
f4bf8e9
to
4d1847c
Compare
|
No bundle size changes comparing 56fcebb...4d1847c |
| }); | ||
|
|
||
| function ListItemLink(props: ListItemProps<'a', { button?: true }>) { | ||
| return <ListItem button component="a" {...props} />; |
There was a problem hiding this comment.
@pelotom I guess this is somewhat better than before. It's not truly accurate because I would not be able to use <ListItemLink component="span" /> but I guess the tradeoff is somewhat ok. I think it's even good to forbid this because it limits the amount of places people would change what DOM node is rendered.
ListItemProps<'a', { button?: true }> is however accurate for <ListItem {...props} button component="a"/>.
I tried it with union props but gave up at some point. ListItem is just a monster when it comes to "what DOM node will be rendered?". I'll look into a simpler component and see if we can simplify those types with union props. I'm suspecting that this will still cause implicit any in callbacks because type inference works differently in JSX.
Testing #11731