コンポーネントに型安全にReact Hook Formを適用する

UseFormRegisterReturnを使う

InputPropsはInputタグがとりうる全ての属性の型が入ってると思ってください。

TextField.tsx

import { UseFormRegisterReturn } from 'react-hook-form'

type Props = InputProps & {
  register?: UseFormRegisterReturn
  error?: string
}

export function TextField(props: Props) {
  const { error, register, ...rest } = props

  return (
      <input {...register} {...rest} />
      <ErrorMessage>{error}</ErrorMessage>
  )
}

Form.tsx

<TextField
  register={register('name', { required: '必須です', })}
  error={error}
>

なぜかregisterをそのままバインドしようとしてしまって、このUseFormRegisterReturnという型が意外と出てこなかった。
というかregisterを...で展開せずにそのままバインドしようとすると型定義がUseFormRegister<TFieldValues>になってて、ジェネリクスが必要でそれがちょっと難しいので展開して渡す方がいいと思う。