Skip to content

Issue with 'this' Parameter and JSX Component GenericsΒ #55431

Open
@rosostolato

Description

@rosostolato

πŸ”Ž 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

Metadata

Metadata

Assignees

Labels

BugA bug in TypeScriptRescheduledThis issue was previously scheduled to an earlier milestone

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions