import React from "react";
type FooProps<T> = {
genericProp: T
}
export const Foo = <T = string,>({ genericProp }: FooProps<T>) => {
// ^ Error highlighting starts here
return <div>{String(genericProp)}</div>
}
🙁 Actual behavior
When defining a React JSX component as a Generic component, if you add a type default to the type parameter, the syntax highlighting marks it as an error, but no error is actually reported.
If you remove the fallback, or add an extends, the syntax error highlighting goes away.
The readme at my reproduction repo has screenshots of the bug in action, in case I've not explained the behaviour particularly well.
🙂 Expected behavior
Syntax highlighting should be able to handle Generics with default types in JSX files.
🔎 Search Terms
"vscode jsx generics"
🕗 Version & Regression Information
⏯ Playground Link
https://github.com/james-yeoman/jsx-syntax-bug
💻 Code
🙁 Actual behavior
When defining a React JSX component as a Generic component, if you add a type default to the type parameter, the syntax highlighting marks it as an error, but no error is actually reported.
If you remove the fallback, or add an extends, the syntax error highlighting goes away.
The readme at my reproduction repo has screenshots of the bug in action, in case I've not explained the behaviour particularly well.
🙂 Expected behavior
Syntax highlighting should be able to handle Generics with default types in JSX files.
Additional information about the issue
https://github.com/microsoft/TypeScript/issues/45939 - Highly related, but is for typescript itself, rather than for VSCode's syntax highlighting.
My VSCode installation
Aboutcontent