Typescript introduces support for the JSX syntax. So I have an expression that works quite well with traditional *.ts files but no with *.tsx ones:
const f = <T1>(arg1: T1) => <T2>(arg2: T2) => {
return { arg1, arg2 };
}
I wonder is there a way to make it work inside a *.tsx file?
To get it to understand it's a type parameter and not a JSX element, you can add a comma after the type parameter:
const f = <T1,>(arg1: T1) => <T2,>(arg2: T2) => {
return { arg1, arg2 };
};
Or you could use function expressions instead:
const f = function<T1>(arg1: T1) {
return function<T2>(arg2: T2) {
return { arg1, arg2 };
};
};
Or alternatively, in this scenario, this works:
const f = <T1, T2>(arg1: T1) => (arg2: T2) => {
return { arg1, arg2 };
};
<T extends string>This is a result of parsing ambiguity issues. One thing that would make this unambiguous is adding an explicit constraint on T1.
const f = <T1 extends unknown>(arg1: T1) => {
return { arg1 };
}
Type parameters like T1 implicitly have a constraint of unknown anyway, so in this case your code is functionally equivalent.
Take this solution and you can apply on each arrow function from your original example.
extends any
{}, and for the most part are functionally equivalent.
extends {} because in that case your function wouldn't accept something pretty common like React.ReactNode (which can be null). Are there any gotchas with using <T, Dummy>? So far seems to be working ok but wanted to make sure. This one sounds the cleanest to me, and makes explicit the reason why it's not just T.extends unknown and I think that should work.
STATE to unknown does nothing and is unnecessary @typescript-eslint/no-unnecessary-type-constraint