React TypeScript中Yup双向条件验证的类型错误求助

问题原因 #

Yup的object().shape()方法第二个参数exclusiveDependencies要求传入长度为2的字符串元组（[string, string]），但TypeScript默认会把["debtProfile", "taxDispute"]推断为string[]类型，导致类型不匹配报错。

解决方案 #

给依赖数组添加as const类型断言，强制TS将其识别为固定长度的元组：

const formValidationSchema = Yup.object().shape<checkValidation>(
    {
      firstName: Yup.string()
        .min(2, "Too Short!")
        .max(50, "Too Long!")
        .required("Required"),
      lastName: Yup.string()
        .min(2, "Too Short!")
        .max(50, "Too Long!")
        .required("Required"),
      email: Yup.string().email().required("Required"),
      phone: Yup.string().required("Required"),
      province: Yup.string().required("Select Province"),
      city: Yup.string().required("Select City"),
      taxDispute: Yup.number().when(
        "debtProfile",
        (debtProfile: any, field: any) => {
          if (debtProfile?.[0]?.[0]?.program) { // 用可选链避免空值报错
            return field;
          } else {
            return Yup.number().required();
          }
        }
      ),
      debtProfile: Yup.array().when(
        "taxDispute",
        (taxDispute: any, field: any) => {
          if (taxDispute != "") {
            return field;
          } else {
            return Yup.array(
              Yup.object({
                program: Yup.string().required("kindly select Program"),
                year: Yup.string().required("kindly select Year"),
                amount: Yup.string().required("kindly enter any amount"),
              })
            );
          }
        }
      ),
    },
    ["debtProfile", "taxDispute"] as const // 添加类型断言
  );

额外优化建议 #

• 替换any类型为具体的接口定义，提升类型安全性：

  interface DebtItem {
    program: string;
    year: string;
    amount: string;
  }
  // 回调中使用明确类型
  (debtProfile: DebtItem[][], field: Yup.ArraySchema<DebtItem>) => { ... }
  

• 使用可选链?.避免debtProfile[0][0]可能出现的空值报错，增强代码健壮性。

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