Using Generic Arrow Functions in .tsx Files

Ronald Martin
Ronald Martin
Engineering

1 minute read

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 Error
Typescript'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;

Share this post

Subscribe to Updates

Ashby products are trusted by recruiting teams at fast growing companies.

QuoraVantaDockerWeTransferIroncladDeelRampHackerOneFullStoryJuniAstronomerTalentfulModern Treasury
QuoraVantaDockerWeTransferIroncladDeelRampHackerOneFullStoryJuniAstronomerTalentfulModern Treasury
NotionVerkadaRetoolMarqetaDuolingoRedditMercuryDeliveroo
NotionVerkadaRetoolMarqetaDuolingoRedditMercuryDeliveroo