Repository navigation
Generic parameter defaults in arrow functions confused as jsx elements in tsx files #45939
Description
const OkInTsx = function <A = string>() {
return 'ok in ts file';
};
export const BrokeInTsx = <A = string>() => {
return 'ok in ts file';
};To replicate, copy that code in a ts file (v3.3+ tested, updated vscode). It should be ok. Rename ts to tsx and the generic parameter default will be considered a jsx element and therefore a syntax error. I discovered this doing some codegen into a tsx file. If we are writing our own code, we can work around, but it seems jsx and generic parameter defaults on arrow functions aren't working together at the moment.
Activity
MartinJohns commentedon Sep 17, 2021
You forgot to fill out the issue template. It asks for search terms you used to find existing issues. Duplicate of #15713.
matt-erhart commentedon Sep 18, 2021
Whoops, don't know why I didn't get a template that time. This is a slightly different issue which I show in the ts playground here. Basically, there are workarounds for generics on arrow functions, but not for generic parameter defaults with the
=in there. I can repost with template if it's actually new. I searched for typescript generic aliases, typescript generic renaming, typescript generics, advanced typescript generics, generic parameter defaults.andrewbranch commentedon Sep 23, 2021
Your last example gets the syntax wrong in general—the constraint needs to come before the default. It works if you fix that, except that the second-to-last example breaks parsing for everything after it. So the one thing that doesn’t work is an arrow function with a default but no constraint (as in
Broke1), but for all intents and purposes you can always addextends unknown, so there’s still at least one workaround for everything you could need to do.matt-erhart commentedon Sep 24, 2021
Aha, got it, thanks.