【TypeScript】Reactでのジェネリクス利用方法

<>という記号はjsxと思われるので、次のように書くとエラーになる

const fn = <T>(parm:T) => {}

解決方法はいくつかあって、基本的にjsxでは書けない構文を使うことで、<>はjsxではなく型引数であることを認識させる。

第二型引数を書く

第二引数は利用しないのでアンダーバーで定義する

const fn = <T, _>(x: T): T => x;

unknownを継承した型引数にする

unknownはすべての型が継承している型なのでextendsしても問題ないらしい。ということでjsxにはextendsは書けないから、あえてextendsを書くことで型引数だなと理解させる。

const fn = <T extends unknown>(x: T): T => x;

アロー関数が使いたくて型引数が1つしかない場合なら、unknownをextendsするのが良いかも。
アンダーバー引数を誤って利用してしまうかもしれないので。

アロー関数を利用しない

アロー関数にするからjsxだと勘違いされるみたい。ならアロー関数を捨てる。

const fn = function <T>(x: T) {};