2022-2-20

[React] forwardRefのジェネリクスに何を指定すべきか

結論

React.forwardRef<T, P> に関して、

• T: 親に何のrefを渡すか（aタグなら HTMLAnchorElement ）
• P: コンポーネントのProps

を指定すればいい。

詳細

forwardRef の型定義は以下のようになっている。

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

forwardRef は ForwardRefRenderFunction を引数に取り ForwardRefExoticComponent を返す関数。前提としてコンポーネントによってPropsは異なるため、ジェネリクスでPropsに関数情報を渡してあげる必要がある。

で、 RefAttributes の型定義がこれ

interface RefAttributes<T> extends Attributes {
  ref?: Ref<T> | undefined;
}

なので、 T は「何のrefとして扱われるか」ということを示すために使うというのが型定義からわかる。

なのでもう一つの P にPropsを指定するのだと予想できる。実際 PropsWithoutRef<P> にてrefを除いたPropsを取り出していて PropsWithoutRef<P> & RefAttributes<T> とrefと合成して ForwardRefExoticComponent のジェネリクスとして渡している。

まとめ

Reactに限らず、TypeScript対応しているライブラリには「この関数はこう使うんだよ〜」という説明は豊富に書いてくれているが、「このジェネリクスにはこれを指定するんだよ〜」という説明がないので型定義を読まないと意味がわからないことが多くてTypeScriptも大変ではある。（それでもJavaScriptに戻りたいとは全く思わないけど）