Loss of function parameter typing when inferring props of React component

[quantizor]

Bug Report

🔎 Search Terms

polymorphic component, react component prop inference

🕗 Version & Regression Information

I noticed this 4.5.2, not sure how far the issue goes back or if it ever worked.

⏯ Playground Link

Playground link with relevant code

💻 Code

import React from 'react'

type ComponentOrHTMLTag = keyof JSX.IntrinsicElements | React.ComponentType<any>;

type CustomComponentProps<
  ActualComponent extends ComponentOrHTMLTag,
  ActualComponentProps = React.ComponentProps<ActualComponent>
> = ActualComponentProps & {
    component?: ActualComponent;
  };

interface CustomComponent<
  FallbackComponent extends ComponentOrHTMLTag,
> {
  <ActualComponent extends ComponentOrHTMLTag = FallbackComponent>(
    props: CustomComponentProps<ActualComponent>
  ): React.ReactElement<CustomComponentProps<ActualComponent>>;
}

const Field = ({component: Component = 'input', ...props}: {component: ComponentOrHTMLTag}) => <Component {...props} />

export const DSField: CustomComponent<'input'> = Field;

type Item = {
  name: string
}

const ToyInputWithFunctionProp = ({ exampleFunction, item, ...props }: { exampleFunction: (item: Item) => string,  item: Item}) => <input data-thing={exampleFunction(item)} {...props} />

function main() {
  return (
    <DSField component={ToyInputWithFunctionProp} exampleFunction={item => item.name} item={{ name: 'foo'}} />
  )
}

🙁 Actual behavior

Error: Parameter 'item' implicitly has an 'any' type.

🙂 Expected behavior

item should retain its type Item

Tf you hover on exampleFunction to get the intellisense for it, the correct type is observed. It seems to be lost on the interpolated JSX value.

[devanshj]

Here's a more minimal repro. Playground.

import React from 'react'

declare const Identity:
  <C extends UnknownComponent>
    (props: { component?: C } & Props<C>) => 
      React.ReactElement

type UnknownComponent =
  | keyof JSX.IntrinsicElements
  | ((props: never) => React.ReactElement)

type Props<C extends UnknownComponent> =
  C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C] :
  C extends ((props: infer P) => unknown) ? P : 
  never

declare const Input:
  (props: { value: string, onChange: (v: string) => void }) =>
    React.ReactElement;

<Identity
  component={Input}
  onChange={value => {
    // value is any, expected string
  }}
  value="foo" />

Identity({
  component: Input,
  onChange: value => {
    // value is string, expected string
  },
  value: "foo"
})

It works for the function version Identity({...}) but not for the jsx version <Identity {...} />. Seems like a bug to me.

Also is it just me or the playground is actually very slow for this snippet?

[MartinJohns]

This sounds like #44596.

[quantizor]

This sounds like #44596.

Yes I can confirm it's the same issue. You can mark this as duplicate.

[MartinJohns]

I'm no member of the TypeScript team, I can't do shit but talk. :-D

[RyanCavanaugh]

Appreciated as usual @MartinJohns 😅