如何让react-hook-form输入框name独立于FormValues类型约束？

问题场景 #

我使用react-hook-form创建了如下表单：

import React from "react";
import ReactDOM from "react-dom";
import { useForm, SubmitHandler } from "react-hook-form";

import "./styles.css";

function App() {
  type FormValues = {
    firstName: string;
    lastName: string;
    email: string;
  };

  const { register, handleSubmit } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) =>
    alert(JSON.stringify(data));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>First Name</label>
        <input {...register("firstName")} />
      </div>

      <div>
        <label>Last Name</label>
        <input {...register("lastName")} />
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input type="email" {...register("email")} />
      </div>

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当前TypeScript会强制要求register绑定的输入框name必须是FormValues中定义的键。若移除FormValues中的email: string;，则<input type="email" {...register("email")} />会触发TS错误：

Argument of type '"email"' is not assignable to parameter of type '"firstName" | "lastName"'.ts(2345)

问题：如何解决该问题，使输入框name独立于FormValues？

解决方案 #

方法1：给FormValues添加索引签名 #

修改FormValues类型，添加字符串索引签名，允许任意额外的字符串键值对，同时保留已有字段的类型检查：

type FormValues = {
  firstName: string;
  lastName: string;
  // 允许任意字符串作为键，值类型可根据需求设为any或具体类型
  [key: string]: any;
};

方法2：给register显式指定类型 #

如果不想修改FormValues，可以在调用register时直接指定字段类型，绕过TS的键名检查：

<input type="email" {...register<string>("email")} />

方法3：不指定useForm的泛型参数 #

如果不需要对表单数据进行严格的类型约束，可以直接省略useForm的泛型参数，这样register会接受任意字符串作为name：

const { register, handleSubmit } = useForm();
// 对应的提交处理函数可改为接收任意键值对类型
const onSubmit = (data: Record<string, any>) =>
  alert(JSON.stringify(data));

适用场景说明 #

• 方法1适合需要保留核心字段类型校验，同时允许动态添加额外字段的场景。
• 方法2适合仅个别字段需要脱离FormValues约束的场景，精准控制单个字段。
• 方法3适合快速开发、对表单数据类型要求不高的场景。

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