Vue+Vee-Validate中使用Yup条件校验遇类型错误求助

问题根源是paymentDetails初始被定义为yup.object()，但otherwise分支返回字符串类型的Schema，类型不兼容导致TypeScript重载匹配失败。Yup的when条件分支返回的Schema类型需要和初始定义的Schema兼容，这里我们可以用yup.mixed()作为基础类型来兼容多种类型。

修正后的代码 #

首先定义表单的类型（可选但能提升TypeScript类型提示体验）：

type PaymentForm = {
  paymentType: 'BankCard' | string;
  paymentDetails: {
    cardNumber: string;
    cardHolder: string;
    expiryDate: string;
    cvv: string;
  } | string;
};

然后修改表单校验逻辑：

const { handleSubmit, errors, defineField } = useForm<PaymentForm>({
  validationSchema: toTypedSchema(yup.object({
    paymentType: yup.string().required().default('BankCard'),
    paymentDetails: yup.mixed().when('paymentType', {
      is: (val: string) => val === 'BankCard',
      then: yup.object({
        cardNumber: yup.string().required(),
        cardHolder: yup.string().required(),
        expiryDate: yup.string().required(),
        cvv: yup.string().required(),
      }).required(),
      otherwise: yup.string().email().required()
    })
  })),
});

关键说明 #

• 使用yup.mixed()作为paymentDetails的初始Schema，它能兼容对象和字符串两种类型，解决类型不匹配问题。
• 在then分支的object Schema后追加.required()，确保当paymentType为BankCard时，paymentDetails这个对象本身是必填项。
• 显式指定useForm的泛型类型PaymentForm，让TypeScript正确推断表单字段类型，避免后续开发中的类型错误。

内容的提问来源于stack exchange，提问作者Neville Bamshoot