TypeScript: MenuItem does not allow the props needed by a component override

CodeSandbox: https://codesandbox.io/s/chakra-ts-starter-s8bur

I came across this when trying to make a TypeScript sandbox for #142.

I think the type should allow the props allowed by the component used in the as prop. I appreciate this might be a little bit hard to do with TypeScript. I imagine some fun with generics is needed.

[aaronmcadam]

I don’t think that workaround is too bad.

I think we’d have to use generics, so it’d look something like this:

// when TypeScript 3.7 is out, we'll have recursive types.
// Some other wrapper type might work though
// `IconButtonProps` replaces `TComponentOverrideProps` here
type MenuButtonProps<TComponentOverrideProps> = MenuButtonProps & TComponentOverrideProps;

// then, using it in TSX would look like this:
<MenuButton<IconButtonProps> as={IconButton}>...</MenuButton>

Ref: https://mariusschulz.com/blog/passing-generics-to-jsx-elements-in-typescript

Formik allows users to use them to pass the type of form data: https://github.com/jaredpalmer/formik/issues/1694

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.Thank you for your contributions.