如何为React Hook Form组件的Register属性使用TypeScript泛型

1. 定义泛型Props接口 #

先把组件的Props改成泛型结构，让register的类型依赖于泛型T：

import { UseFormRegister } from 'react-hook-form';

interface PatientInfoProps<T> {
  register: UseFormRegister<T>;
  // 可按需添加其他props，比如表单提示文本、字段配置项等
}

2. 声明泛型组件 #

给组件本身加上泛型声明，并约束T为对象类型（表单数据结构本质都是对象）：

const PatientInfo = <T extends object>({ register }: PatientInfoProps<T>) => {
  return (
    <div className="patient-info-form">
      {/* 根据泛型T的结构绑定字段，示例字段需对应T中的属性 */}
      <div>
        <label>姓名</label>
        <input {...register('name')} />
      </div>
      <div>
        <label>年龄</label>
        <input {...register('age')} type="number" />
      </div>
      {/* 若T包含其他字段，可继续添加对应表单控件 */}
    </div>
  );
};

3. 父组件中复用泛型组件 #

在父组件里，针对不同的表单数据结构，通过useForm生成对应类型的register，传递给PatientInfo时显式指定泛型：

import { useForm } from 'react-hook-form';

// 原有患者表单结构
interface PatientFormInputs {
  name: string;
  age: number;
  diagnosis: string;
}

// 新增的医生表单结构示例
interface DoctorFormInputs {
  name: string;
  department: string;
  licenseNumber: string;
}

const FormContainer = () => {
  // 生成患者表单的register
  const { register: patientRegister } = useForm<PatientFormInputs>();
  // 生成医生表单的register
  const { register: doctorRegister } = useForm<DoctorFormInputs>();

  return (
    <div>
      <h2>患者信息</h2>
      <PatientInfo<PatientFormInputs> register={patientRegister} />

      <h2>医生信息</h2>
      <PatientInfo<DoctorFormInputs> register={doctorRegister} />
    </div>
  );
};

常见错误规避 #

• 泛型约束缺失：如果组件内部依赖T的固定字段（比如name），可以给泛型加更严格的约束：T extends { name: string }，避免绑定字段时出现类型错误。
• 泛型推断失败：父组件使用时尽量显式指定泛型类型，尤其是复杂表单结构，避免TS自动推断出错。
• Props泛型未关联组件泛型：确保组件的泛型T和Props接口的T是同一个，否则会出现类型不匹配。

内容的提问来源于stack exchange，提问作者Mitar Ilic