React.forwardRefのジェネリクス型指定について

Question

知りたいこと

React.forwardRefを利用した以下のようなコードがあります。

import * as React from 'react'

type ButtonProps = React.HTMLProps<HTMLButtonElement>

const FancyButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <button type="button" ref={ref} className="FancyButton">
    {props.children}
  </button>
))

const ref = React.createRef<HTMLButtonElement>()

<FancyButton ref={ref}>Click me!</FancyButton>

このとき５行目でforwardRefのジェネリクスに指定している<HTMLButtonElement, ButtonProps>の意味がわかりません。

forwardRefの型定義を見ると以下のようになっています。

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

このTとPにあたるものを指定しているのだと思いますが、それぞれどのような値（型）を設定すべき項目なのでしょうか。
ご教示宜しくお願い致します。

Answer 1

React.forwardRef の引数に渡しているコンポーネントの型とそのPropsの型を指定します。

HTMLButtonElement について

React の型定義には HTMLElement を継承した HTML{ほにゃらら}Element が標準であります

HTML Element の名前で補完が効くと思います。

<input /> なら HTMLInputElement
<button /> なら HTMLButtonElement
<div /> なら HTMLDivElement

Element の ref 系のジェネリクス型指定の際によく使います。

ButtonProps について

type ButtonProps = React.HTMLProps<HTMLButtonElement>

の部分は HTMLElement 型から props の型を取り出す React.HTMLProps<T> という util を使っています。

React component 型から props を取り出す React.ComponentProps<T> の HTMLElement 用です。

// <button /> の Props 型を取り出す
type ButtonProps = React.HTMLProps<HTMLButtonElement>

// <Component /> の Props 型を取り出す
type Props = React.ComponentProps<typeof Component>