Yup+TypeScript数字验证失效：React Hook Form条件校验类型报错

错误核心是默认情况下Yup的NumberSchema会包含null类型（即Maybe<number | undefined>里的Maybe涵盖了null），但字段定义期望的是number | undefined，导致类型不匹配。

直接修改代码即可解决：

yup
  .object({
    test1: yup.number().nullable(false).when('test2', (test2: number, schema: yup.NumberSchema<number | undefined>): yup.NumberSchema<number | undefined> => {
      if (test2 !== undefined && test2 < 1) {
        return schema.required('Required Field').min(0).max(100).typeError('Please enter test1')
      }
      return schema.notRequired()
    }),
    Name: yup
      .string()
      .trim()
      .required('Required Field')
      .matches(/^[A-Za-z ]+$/, 'Numbers & Special character not allowed'),
    test2: yup.number().required('Required Field').min(0).max(100).typeError('Please enter test2'),
  })
  .required()

关键修改点： #

• 给test1的初始number() schema添加.nullable(false)，明确禁止字段接受null值，将类型从Maybe<number | undefined>修正为number | undefined。
• 调整when回调中的schema类型声明为yup.NumberSchema<number | undefined>，确保回调返回值类型与字段定义完全对齐。

如果不需要自动类型转换，也可以用.strict()替代.nullable(false)，同样能禁止null值，同时关闭Yup的自动类型转换逻辑。

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