π 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
π Search Terms
"jsx component with
this", "jsx component ThisParameterType"π Version & Regression Information
β― Playground Link
https://www.typescriptlang.org/play?jsx=1&ts=5.3.0-dev.20230818#code/CYUwxgNghgTiAEA7KBbEBnADlMCBSAygBrwDeAUPPAC4CemCAMgJYBGMstAslMgOYhgAQWrUYbAK7UMAHgDCAGngAFAHzwAvPAAqAC2bplsVCGkxt9EPNUBucpXjNEZgGY4EASWfjE6ZmABRCBA0Z3QyBypgZgA3AC4yAF87KkTyNPIXCUQwamYAe0QdDGoZbVUACmp9dATSeBioCAkQBO14RIBKCKo4agkYIplomNV66oMAOkbmhESZAHoR1XT7MpKZRAkUVhAYdRmWjVIAVkT4BZXyMEL0ah1LYG0SzWK7ze3d-btyMsfnu4NJpHU7nS7kIA
π» Code
π 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>, theTestcomponent still exhibits the issue where the type of value remainsunknown.π 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>>, thevalueprop's type gets correctly inferred asnumber.