events have implicit any #8

Activity

1. Mesoptier commented on Jun 15, 2021

   

   Mesoptier

   on Jun 15, 2021

   More actions

   Unfortunately it's hard to make this work cleanly (I've spend a lot of time trying). In my experience you have two possible workarounds:

   // Either explicitly specify the value for the generic T:
   <Button<'a'> as="a" foo="bar" onClick={(event) => console.log(event)} />
   
   // Or explicitly specify the type for `event`:
   <Button as="button" foo="bar" onClick={(event: React.MouseEvent<HTMLButtonElement>) => console.log(event)} />

   I prefer the first option since it's the least amount of additional typing. It obviously comes with the downside of having to specify the element type twice: once as generic (compile-/type-time) and once as value to as (run-time). Note that the type checker forces the two element-types to be exactly the same, so it should never go wrong.

   

   👍React with 👍1Reacted by Kristóf Poduszló

   😕React with 😕1Reacted by tu4mo

   👀React with 👀1Reacted by José Núñez
2. tu4mo commented on Jun 15, 2021

   

   tu4mo

   on Jun 15, 2021

   Author

   More actions

   I appreciate the suggestions @Mesoptier. But having to define the generic type makes the as-prop pretty much useless.

   Is this a current restriction in TypeScript?
3. Mesoptier commented on Jun 15, 2021

   

   Mesoptier

   on Jun 15, 2021

   More actions

   It seems to me that it is indeed an issue/restriction with TypeScript itself. I've created an issue on their end: microsoft/TypeScript#44596. Hopefully that will lead to either a fix in TypeScript or perhaps to a solution that does not require specifying the element type twice.

   Aside: I believe this is the same issue as #5. The only difference being that this issue refers to event calbacks, whereas the other issue is about the ref callback.

   👍React with 👍2Reacted by tu4mo and Dennis Martinez
4. marceloadsj commented on Jul 5, 2021

   

   marceloadsj

   on Jul 5, 2021

   More actions

   I couldn't test it but: https://www.radix-ui.com/docs/primitives/utilities/polymorphic

   Seems radix solved this problem, maybe it's worth to have a look.

   I am away from my pc now, but I will give it a try soon and I post here!
5. tu4mo commented on Jul 5, 2021

   

   tu4mo

   on Jul 5, 2021

   Author

   More actions

   Seems to be working!

   https://codesandbox.io/s/peaceful-fire-9nmpt?file=/src/App.tsx
6. Mesoptier commented on Jul 5, 2021

   

   Mesoptier

   on Jul 5, 2021

   More actions

   This is great, finally a solution!

   @kripod, I believe this is the key part of their solution that react-polymorphic-types doesn't do:

      * We explicitly avoid `React.ElementType` and manually narrow the prop types
      * so that events are typed when using JSX.IntrinsicElements.
   

   https://github.com/radix-ui/primitives/blob/1afa7012fedf8d119b6f07ef86729cacf1152ced/packages/react/polymorphic/src/polymorphic.ts#L41-L42
7. kripod

   closed this as completedin b2838f9on Jul 11, 2021
8. kripod commented on Jul 11, 2021

   

   kripod

   on Jul 11, 2021

   Owner

   More actions

   @Mesoptier thanks for your insightful comment! I figured out how to resolve this and just released v2 with a fix 😊

   I think #5 could be fixed in a similar manner.

   👍React with 👍1Reacted by tu4mo

   😄React with 😄1Reacted by Koen Klaren
9. Mesoptier commented on Jul 12, 2022

   

   Mesoptier

   on Jul 12, 2022

   More actions

   This issue has now been fixed on TypeScript's end (microsoft/TypeScript#44596), so perhaps this issue can be fixed in a nicer way now?

   👀React with 👀1Reacted by José Núñez