🔎 Search Terms

"jsx component with this", "jsx component ThisParameterType"

🕗 Version & Regression Information

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

⏯ Playground Link

https://www.typescriptlang.org/play?jsx=1&ts=5.3.0-dev.20230818#code/CYUwxgNghgTiAEA7KBbEBnADlMCBSAygBrwDeAUPPAC4CemCAMgJYBGMstAslMgOYhgAQWrUYbAK7UMAHgDCAGngAFAHzwAvPAAqAC2bplsVCGkxt9EPNUBucpXjNEZgGY4EASWfjE6ZmABRCBA0Z3QyBypgZgA3AC4yAF87KkTyNPIXCUQwamYAe0QdDGoZbVUACmp9dATSeBioCAkQBO14RIBKCKo4agkYIplomNV66oMAOkbmhESZAHoR1XT7MpKZRAkUVhAYdRmWjVIAVkT4BZXyMEL0ah1LYG0SzWK7ze3d-btyMsfnu4NJpHU7nS7kIA

💻 Code

declare namespace JSX {
  type LibraryManagedAttributes<C, P> = ThisParameterType<C>;

  interface IntrinsicElements {
    div: {};
  }
}

function Test<T>(this: { value: T }) {
  return <div>{ this.value }</div>
}

<Test<number> value={5} /> // value is unknown

🙁 Actual behavior

TypeScript is incorrectly inferring props types for JSX functional components with generic templates when props are derived from the 'this' parameter.

Even when explicitly typed as <number>, the Test component still exhibits the issue where the type of value remains unknown.

🙂 Expected behavior

It should infer the type from the passed data or at least accept that you explicitly type it with <Test<number> ...

Additional information about the issue

If you define a separate variable and assign the component with <Test<number>>, the value prop's type gets correctly inferred as number.

const TypedTest = Test<number>;

<TypedTest value={5} /> // value is number