How to use generics with arrow functions in Typescript/JSX with React?
When you have a single type parameter, TypeScript isn't sure whether it might be a JSX opening tag or not. It has to choose one, so it goes with JSX.
If you want a function with the exact same semantics, you can explicitly list the constraint of T:
const foo = <T extends {}>(myObject: T) => myObject.toString();This breaks the ambiguity for TypeScript so that you can use a generic type parameter. It also has the same semantics because type parameters always have an implicit constraint of {}.
Not terribly pretty, but the usual workaround is to add a trailing comma:
export const foo = <T,>(myObject: T) => myObject.toString();
I can't think of a way around that, and will be glad as you to learn of one.
However, here's a different way to achieve the same:
export const foo = function<T>(myObject: T) { return myObject.toString(); }The compiler won't complain about the generics.