`ref` element type not inferred correctly

[rafgraph]

Hi, great library, thanks for creating it! I'm using it in React Interactive

Using the Heading forwardRef example in the readme the ref element type implicitly is any: For a live reproduction see: https://codesandbox.io/s/polymorphic-inferred-ref-type-zqyl6

<Heading
  as="h1"
  color="green"
  // error: Parameter 'element' implicitly has an 'any' type.
  ref={(element) => {}}
>
  As h1
</Heading>

Note that when creating a props object to pass to Heading the ref element type is inferred correctly:

const propsForHeading: HeadingProps<"h1"> = {
  // element type is inferred correctly
  ref: (element) => {},
  children: "Heading using propsForHeading"
};

...

<Heading {...propsForHeading} />

[kripod]

Hello,

Thank you again for reporting with a clear reproduction for your case.

Unfortunately, this seems to be a limitation of TypeScript rather than an issue with this library. Please follow along the following issue for further details: https://github.com/kripod/react-polymorphic-box/issues/13

Please provide the element type explicitly until a fix is available:

<Heading
  as="h1"
  color="green"
  ref={(element: HTMLHeadingElement | null) => {}}
>
  As h1
</Heading>

[rafgraph]

Thanks for the info. It looks like https://github.com/microsoft/TypeScript/pull/31023 was merged in December, but not sure if it's been released yet.

[Mesoptier]

@kripod I think it's fair to assume that the previously mentioned PR has been released by now. Unfortunately this issue has not been fixed by that change. Perhaps you could re-open this issue?

[Mesoptier]

This comment is relevant for this issue as well:

This issue has now been fixed on TypeScript's end (https://github.com/microsoft/TypeScript/issues/44596), so perhaps this issue can be fixed in a nicer way now?

https://github.com/kripod/react-polymorphic-types/issues/8#issuecomment-1181436227