Typescript: Error when using Menu.Item as Link.

[wcatron]

Steps

1. Use typescript.
2. Use a Menu.Item with the link property set (also as={Link}) and the to property.

Expected Result

Typescript shouldn't fail.

Actual Result

Typescript fails because to is not a property of Menu.Item. Note: The actual generated code works as expected.

error TS2339: Property 'to' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<MenuItemProps, ComponentState>> & { chil...

Version

0.63.1

Testcase

<Menu.Item name='home' link as={Link} to="/home">Home</Menu.Item>

Solution

One possible solution is to add the to?:string prop to Menu.Item's typescript declaration file however that would snowball because technically it would support any property of Link (or any property of whatever class you put in as). Perhaps a better solution would be to separate it as a subclass of Menu.Item i.e. Menu.Item.Link and only use as when you're defining a class that inherits the same properties as Menu.Item.

[wcatron]

I found a work around for anyone else who runs into this issue. Warning it's pretty ugly.

<Menu.Item name='home' link as={Link} {...{to: "/home"}}>Home</Menu.Item>

[levithomason]

Duplicate, see #1072