如何为react-hook-form的useFormContext添加合法的自定义hardSubmit方法（TS）

方案1：通过模块扩充扩展全局类型 #

React Hook Form支持TypeScript模块扩充，直接扩展UseFormReturn类型，让hardSubmit成为合法属性：

1. 在项目中创建类型声明文件（比如src/react-hook-form.d.ts），写入以下代码：

import 'react-hook-form';

declare module 'react-hook-form' {
  interface UseFormReturn<TFieldValues extends FieldValues = FieldValues> {
    hardSubmit?: () => void;
  }
}

这样TypeScript会自动识别hardSubmit是UseFormReturn的可选属性，你可以直接在FormProvider中传递该属性。

2. 组件内正常使用即可：

const Form = () => {
  const { handleSubmit, ...methods } = useForm();
  const [formStatus, setFormStatus] = useState(FORM_LABELS.idle);
  const onSubmit = (data: YourFormDataType) => {
    // 自定义提交逻辑
  };

  const hardSubmit = () => {
    console.log('hard submit');
    setFormStatus(FORM_LABELS.loading);
    handleSubmit((props) => {
      console.log('submit');
      onSubmit(props);
    })();
  };

  return (    
    <FormProvider {...methods} hardSubmit={hardSubmit}>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* 嵌套表单组件 */}
      </form>
    </FormProvider>
  );
};

方案2：自定义包裹Provider组件 #

如果不想修改全局类型，可以封装一个自定义Provider组件，兼容额外属性：

import { FormProvider as RHFProvider, UseFormReturn, FieldValues } from 'react-hook-form';

interface CustomFormProviderProps<T extends FieldValues> extends UseFormReturn<T> {
  hardSubmit?: () => void;
  children: React.ReactNode;
}

export const FormProvider = <T extends FieldValues>({
  hardSubmit,
  ...rest
}: CustomFormProviderProps<T>) => {
  return <RHFProvider {...rest}>{children}</RHFProvider>;
};

之后直接使用这个自定义的FormProvider，TypeScript会自动识别hardSubmit属性。

额外提示 #

• 建议给表单数据指定具体类型（替换示例中的YourFormDataType），不要用any，能获得更精准的类型提示。
• 如果用模块扩充，确保类型声明文件在TypeScript的扫描范围内（可在tsconfig.json的include字段配置）。

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