react-hook-form useForm泛型defaultValues类型错误原因及修复

在使用 react-hook-form 的 useForm 时，将泛型值设置为 defaultValues 出现类型错误，错误提示：Type 'FooForm<T>' is not assignable to type 'DefaultValues<FooForm<T>>'.ts(2322)

核心代码如下：

import { FieldValues, useForm } from "react-hook-form";

type FooForm<T> = {
  name: string;
  height: number;
} & T;

type UseFooFormOptions<T> = {
  initialFooForm: FooForm<T>;
};

export const useFooForm = <T extends FieldValues>({
  initialFooForm
}: UseFooFormOptions<T>) => {
  const form = useForm<FooForm<T>>({
    // Type 'FooForm<T>' is not assignable to type 'DefaultValues<FooForm<T>>'.ts(2322)
    defaultValues: initialFooForm
  });

  const someOtherReturns = 5;

  return {
    ...form,
    someOtherReturns
  };
};

原因分析 #

DefaultValues<FooForm<T>> 是 React Hook Form 定义的专属类型，它要求表单的所有字段都为可选状态（相当于对原类型做了深层可选处理，类似增强版的 Partial<FooForm<T>>）。但你定义的 FooForm<T> 中，name、height 都是必填字段，扩展的 T 也继承了 FieldValues 的必填特性，全必填的类型自然无法赋值给要求可选的 defaultValues 参数，因此触发类型错误。

修复方案 #

方案1：调整初始值的类型定义 #

直接让传入的初始值符合 DefaultValues 类型要求，修改 UseFooFormOptions 的类型：

import { FieldValues, useForm, DefaultValues } from "react-hook-form";

type FooForm<T> = {
  name: string;
  height: number;
} & T;

type UseFooFormOptions<T> = {
  initialFooForm: DefaultValues<FooForm<T>>;
};

export const useFooForm = <T extends FieldValues>({
  initialFooForm
}: UseFooFormOptions<T>) => {
  const form = useForm<FooForm<T>>({
    defaultValues: initialFooForm
  });

  const someOtherReturns = 5;

  return {
    ...form,
    someOtherReturns
  };
};

方案2：使用类型断言跳过检查 #

如果能确保传入的 initialFooForm 完全符合默认值的要求，可以用类型断言强制转换类型：

const form = useForm<FooForm<T>>({
  defaultValues: initialFooForm as DefaultValues<FooForm<T>>
});

方案3：将表单字段改为可选 #

如果业务场景允许表单初始字段为空，可以直接修改 FooForm 的字段定义为可选：

type FooForm<T> = {
  name?: string;
  height?: number;
} & T;

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