Infer the jsx property type

[NWYLZW]

Bug Report

🔎 Search Terms

jsx, infer property

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about JSX

⏯ Playground Link

import React from 'react'

declare function A(props: {
  children:
    | React.ReactElement<{ test: 'aaaa' | 'bbbb' }>
}): React.ReactElement

declare function B<P extends Record<string, any>>(props: ...

Playground Link

💻 Code

import React from 'react'

declare function A(props: {
  children:
    | React.ReactElement<{ test: 'aaaa' | 'bbbb' }>
}): React.ReactElement

declare function B<P extends Record<string, any>>(props: P): React.ReactElement<P>

const C = <A>
  <B test={'a'} />
  // ^? (property) test: string
  {B({
    test: 'aaaa'
  // ^? (property) test: 'aaaa'
  })}
</A>

🙁 Actual behavior

Infer test property is string type in JSX.

🙂 Expected behavior

Infer test property is 'aaaa' type in JSX.

[Andarist]

Type-checking this won't work without something like #29818 .

The contextual types here could maybe be improved to aid autocompletions and stuff like that, but it likely wouldn't solve your underlying problem, see this playground

[NWYLZW]

Type-checking look like works. In fact, I need provide correct keywords hints when typing 'a', such as:

When using function not JSX, call a function which is return React.ReactElement type. It provide the correct hints.

[NWYLZW]

The example is very easy. Actually, my case is use a function and infer the function arguments type.

[typescript-bot]

This issue has been marked as "Duplicate" and has seen no recent activity. It has been automatically closed for house-keeping purposes.