TypeScript环境yup使用addMethod加自定义方法提示属性不存在如何解决

• 调用方式不匹配：你通过yup.addMethod(yup.string, 'title', defaultTitleValidation)挂载方法时，是将title方法绑定到了yup的StringSchema原型对象上，而非yup根对象本身。你代码中直接调用yup.title()自然会提示属性不存在，该方法只能在yup.string()返回的字符串校验实例上调用。
• 自定义方法逻辑存在冗余：给yup.string扩展方法时，方法内部的this指向本身就是StringSchema实例，不需要再额外调用this.string()生成新的实例，多余的调用可能导致方法行为异常。
• 类型声明未被识别：如果修正调用方式后仍报错，通常是你的common.d.ts声明文件没有被纳入TypeScript的编译检查范围，导致你写的模块扩充没有生效。

1. 修正自定义方法逻辑，调整yupInstance.ts代码：

import * as yup from 'yup';

// 这里的this直接是StringSchema实例，不需要再调用string()
function defaultTitleValidation(this: yup.StringSchema, local: 'en' | 'bn') {
  return this.trim().required();
}

yup.addMethod(yup.string, 'title', defaultTitleValidation);

export default yup;

2. 修正调用代码，调整myImplementationComponent.tsx中的校验规则：

import yup from '../../../../common/yup';

const validationSchema = yup.object().shape({
  // 先调用yup.string()生成字符串校验实例，再调用扩展的title方法，注意传入要求的local参数
  title_en: yup.string().title('en'), 
});

3. 确认类型声明被TypeScript正确加载：
   检查项目根目录的tsconfig.json，确保include配置项包含了common.d.ts所在的目录，示例配置：

{
  "include": [
    "src/**/*",
    "src/**/*.d.ts"
  ]
}

如果你的yup版本和声明中的泛型参数不匹配，可以参考yup包内置的StringSchema定义调整你的common.d.ts泛型参数，确保扩充的接口和原接口定义一致。

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