Using Generic Arrow Functions in .tsx Files

In standard Typescript, you can make an arrow function generic by declaring the type variable before the arguments:

1const identity = <T>(arg: T): T => arg;

However, if you try this in a React .tsx file, the compiler tries to parse the type variable as a JSX tag:

Typescripts Compiler ErrorTypescript's compiler error.

To help the compiler know that this is actually a generic type variable, put a comma (,) after the type variable:

1// Note the comma ๐Ÿ‘‡
2const identity = <T,>(arg: T): T => arg;

๐Ÿ˜ Like this article?

Get more

Receive new articles like this in your inbox. We aim for quality over quantity.

Subscribeย ย 

Join our remote-first team

We're building powerful and delightful software for talent teams.

View rolesย ย