What is the syntax for Typescript arrow functions with generics?
Edit
Per @Thomas comment, in newer TS compilers, we can simply do:
const foo = <T,>(x: T) => x;
Original Answer
The full example explaining the syntax referenced by Robin... brought it home for me:
Generic functions
Something like the following works fine:
function foo<T>(x: T): T { return x; }
However using an arrow generic function will not:
const foo = <T>(x: T) => x; // ERROR : unclosed `T` tag
Workaround: Use extends on the generic parameter to hint the compiler that it's a generic, e.g.:
const foo = <T extends unknown>(x: T) => x;
I found the example above confusing. I am using React and JSX so I think it complicated the scenario.
I got clarification from TypeScript Deep Dive, which states for arrow generics:
Workaround: Use extends on the generic parameter to hint the compiler that it's a generic, this came from a simpler example that helped me.
const identity = < T extends {} >(arg: T): T => { return arg; }
This works for me
const Generic = <T> (value: T) => {
return value;
}
If you're in a .tsx
file you cannot just write <T>
, but this works:
const foo = <T, >(x: T) => x;
As opposed to the extends {}
hack, this hack at least preserves the intent.