Skip to content

ref element type not inferred correctly #5

Open
Open
ref element type not inferred correctly#5

Description

@rafgraph
rafgraph
opened on Apr 1, 2021

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} />

Activity

  1. kripod commented on Apr 2, 2021

    @kripod
    kripod
    on Apr 2, 2021
    Owner

    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: kripod/react-polymorphic-box#13

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

    <Heading
  as="h1"
  color="green"
  ref={(element: HTMLHeadingElement | null) => {}}
>
  As h1
</Heading>
  2. kripod
    closed this as completedon Apr 2, 2021

  3. rafgraph commented on Apr 2, 2021

    @rafgraph
    rafgraph
    on Apr 2, 2021
    Author

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

  4. Mesoptier commented on Apr 29, 2021

    @Mesoptier
    Mesoptier
    on Apr 29, 2021

    @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?

  5. kripod
    reopened this on Apr 29, 2021

  6. Mesoptier commented on Jul 12, 2022

    @Mesoptier
    Mesoptier
    on Jul 12, 2022

    This comment is relevant for this issue as well:

    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?

    #8 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions