ReactのforwardRefの型定義

Next.jsのnext/linkにあるIf the child is a function componentをtypescriptでやろうと思ったら、型定義にはまったのでメモとして残します。

const MyButton = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref}>
      Click Me
    </a>
  )
})

以下のようにしたら動作しました。

interface Props {
  onClick: React.MouseEventHandler<HTMLAnchorElement>,
  href: string,
}

type RefType = React.LegacyRef<HTMLAnchorElement>

const MyButton = React.forwardRef(({ onClick, href }: Props, ref: RefType) => {
  return (
    <a href={href} onClick={onClick} ref={ref}>
      Click Me
    </a>
  )
})

最初はこんな感じに書いていました…

const MyButton = React.forwardRef<RefType, Props>(({ onClick, href }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref}>
      Click Me
    </a>
  )
})