Typescript TSX and generic parameters

Question

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?

Answer 1

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.

Answer 2

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 }; };