如何在TypeScript中覆写react-hook-form的FieldError类型

要实现每个字段返回多个错误并让TypeScript正确识别，你可以通过**模块扩充（Module Augmentation）**覆写React Hook Form的FieldError类型，具体步骤如下：

1. 创建类型声明文件
   在项目的src目录（或根目录）下新建react-hook-form.d.ts文件，TypeScript会自动识别这个文件来扩充原有类型。

2. 覆写FieldError类型
   在文件中写入以下代码，将FieldError从单个对象改为同结构的对象数组：

import type { FieldError as OriginalFieldError } from 'react-hook-form';

declare module 'react-hook-form' {
  // 复用原FieldError的结构，将其改为数组类型
  export type FieldError = OriginalFieldError[];
}

如果你的自定义错误对象和原OriginalFieldError结构一致（包含message、type等属性），这样就足够了；如果需要自定义错误结构，可以直接定义数组元素的类型：

declare module 'react-hook-form' {
  export type FieldError = {
    message: string;
    type: string;
    // 可添加自定义属性
  }[];
}

3. 验证类型生效
   现在当你从useForm中获取errors时，每个字段的错误会被TypeScript识别为数组，你可以直接用map遍历：

// 示例：渲染密码字段的所有错误
const { register, formState: { errors } } = useForm();

return (
  <div>
    <input {...register('password')} />
    {errors.password?.map((err, index) => (
      <p key={index} className="error">*{err.message}</p>
    ))}
  </div>
);

4. 确保TypeScript识别声明文件
   检查你的tsconfig.json，确保include数组包含了这个声明文件，比如：

{
  "include": ["src/**/*", "src/react-hook-form.d.ts"]
}

这样就能解决TypeScript的类型报错，同时保留React Hook Form的其他原有类型不变。

内容的提问来源于stack exchange，提问作者Gustavo Mendonça