🛡️

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

2022/01/07に公開2

<>という記号は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) {};

Discussion

misukenmisuken

コメント失礼いたします。
https://stackoverflow.com/a/56989122 に書いてあるように、tsx では以下のようにカンマだけで成立します。(慣れないと不思議な感じがするかもしれませんが)

const foo = <T,>(x: T) => x;
ログインするとコメントできます