如何在TypeScript React项目中结合React Hook Form使用动态类型？

方案1：给组件添加泛型参数（推荐，兼顾类型安全） #

既然你的组件是可复用的过滤器容器，可以把表单字段的类型作为泛型参数传入组件，让useForm基于这个泛型工作，这样setValue就能正确识别字段名和值的类型：

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

// 定义组件时接受泛型T，代表表单字段的结构类型
type FilterContainerProps<T extends Record<string, unknown>> = {
  children: (formMethods: UseFormReturn<T>) => React.ReactNode;
  // 其他组件props...
};

export function FilterContainer<T extends Record<string, unknown>>({ children }: FilterContainerProps<T>) {
  // 用泛型T初始化useForm
  const formMethods = useForm<T>();
  
  // 从缓存读取字段的示例逻辑
  const cachedFields: [keyof T, T[keyof T]][] = getCachedFields();
  
  // 此时可以安全调用setValue，TS会校验字段名和值的类型匹配
  cachedFields.forEach(([fieldName, fieldValue]) => {
    formMethods.setValue(fieldName, fieldValue, { shouldDirty: true });
  });

  return <div>{children(formMethods)}</div>;
}

使用组件时传入具体的字段类型：

type UserFilterFields = {
  name: string;
  age: number;
};

<FilterContainer<UserFilterFields>>
  {(form) => (
    <>
      <input {...form.register('name')} />
      <input type="number" {...form.register('age')} />
    </>
  )}
</FilterContainer>

方案2：类型断言（无类型安全，适合完全动态的场景） #

如果你的场景完全无法提前定义字段类型（比如字段完全由外部动态生成），可以通过类型断言绕过TS的类型检查：

// 把setValue断言为接受任意string字段名和unknown值的函数
const setValueUnsafe = formMethods.setValue as (
  name: string,
  value: unknown,
  options?: Partial<{
    shouldValidate: boolean;
    shouldDirty: boolean;
    shouldTouch: boolean;
  }>
) => void;

fields.forEach(([fieldName, fieldValue]) => {
  setValueUnsafe(fieldName, fieldValue, { shouldDirty: true });
});

注意：这种方法会关闭TS的类型校验，可能导致传入不存在的字段名或类型不匹配的值，只建议在完全无法确定类型的极端场景下使用。

方案3：使用useForm的默认泛型（折中方案） #

如果不想定义具体类型，也可以给useForm传入Record<string, unknown>作为泛型参数，这样setValue的字段名将允许为string，值的类型被限制为unknown：

const formMethods = useForm<Record<string, unknown>>();

// 此时setValue可以直接接收string类型的字段名
fields.forEach(([fieldName, fieldValue]) => {
  formMethods.setValue(fieldName, fieldValue, { shouldDirty: true });
});

这种方法比类型断言更安全，至少TS会限制值的类型范围，避免完全任意的类型传入。

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