Yup 库中如何扩展 Schema 方法并处理文件类型验证

在 Yup 这个流行的 JavaScript 数据验证库中，开发者经常需要扩展内置的 Schema 方法来满足特定的验证需求。本文将通过一个实际案例，详细介绍如何为 Yup 的 MixedSchema 添加自定义验证方法，特别是针对文件大小验证的场景。

扩展 Yup Schema 方法

Yup 提供了灵活的扩展机制，允许开发者通过 addMethod 函数为各种 Schema 类型添加自定义验证方法。基本扩展模式如下：

1. 首先需要声明模块扩展，为特定 Schema 类型添加方法签名
2. 然后使用 addMethod 实现具体的验证逻辑

declare module "yup" {
  interface MixedSchema {
    maxMBSize(mb: number): MixedSchema;
  }
}

文件大小验证的实现

在文件上传场景中，经常需要验证文件大小是否超过限制。我们可以通过扩展 MixedSchema 来实现这一功能：

yup.addMethod<yup.MixedSchema>(yup.mixed, "maxMBSize", function (mb: number) {
  return this.test({
    name: "maxMBSize",
    message: ({ label }) => `文件 ${label} 的总大小必须小于 ${mb}MB`,
    test: (value) => {
      if (!(value instanceof FileList)) return false;
      
      const files = Array.from(value);
      const totalSize = files.reduce((size, file) => size + file.size, 0);
      return totalSize < mb * 1024 * 1024;
    }
  });
});

类型安全处理

在 TypeScript 环境下，我们需要特别注意类型安全问题。原始代码中直接使用 FileList 类型会导致类型不匹配错误，因为 Yup 的测试函数接收的是 AnyPresentValue | undefined 类型。正确的做法是：

1. 在测试函数内部进行类型检查
2. 处理可能的 undefined 情况
3. 确保返回值是布尔类型

实际应用示例

扩展后的方法可以这样使用：

const schema = yup.object({
  avatar: yup.mixed().maxMBSize(2).required()
});

// 验证文件输入
const fileInput = document.querySelector('input[type="file"]');
const isValid = await schema.validate({ avatar: fileInput.files });

注意事项

1. 确保在使用前正确声明了模块扩展
2. 考虑浏览器兼容性，FileList 在较老浏览器中可能不可用
3. 对于大文件计算，注意性能影响
4. 错误消息可以进一步定制化以满足不同场景需求

通过这种方式扩展 Yup 的验证功能，开发者可以轻松实现各种复杂的业务验证需求，同时保持代码的类型安全和可维护性。