Next TS项目中使用Yup验证时遇RequiredStringSchema类型错误求助

在Next.js TypeScript项目中使用Yup时，验证Schema里PostWithSig对象下的type属性触发了类型错误，错误信息如下：

(property) BaseSchema<any, any, any>.type: string Type
'RequiredStringSchema<string | undefined, AnyObject>' is not
assignable to type 'string'.ts(2322) schema.d.ts(53, 14): The expected
type comes from property 'type' which is declared here on type
'AnySchema<any, any, any>'

当前的验证Schema代码：

data: object().shape({
    createPostTypedData: object().shape({
      id: string().required(),
      expiresAt: date().required(),
      typedData: object().shape({
        types: object().shape({
          PostWithSig: array().of({
            name: string().required(),
            type: string().required(),
          }),
        }),
        domain: object().shape({
          name: string().required(),
          chainId: number().required(),
          version: string().required(),
          verifyingContract: string().required(),
        }),
        value: object().shape({
          nonce: number().required(),
          deadline: number().required(),
          profileId: string().required(),
          contentURI: string().required(),
          collectModule: string().required(),
          collectModuleInitData: string().required(),
          referenceModule: string().required(),
          referenceModuleInitData: string().required(),
        }),
      }),
    }),
  }),

错误原因 #

Yup的BaseSchema类内置了一个type属性，用来标识当前Schema的类型（比如字符串类型Schema的type值为"string"）。当你直接在array().of()中传入包含type字段的对象字面量时，TypeScript会把这个type字段误认为是Schema实例的内置type属性，而不是你要验证的目标字段——前者要求值为字符串类型，而你传入的是RequiredStringSchema实例，因此触发类型不匹配错误。

修复方案 #

最规范的解决方式是给数组中的每个对象显式添加object().shape()包裹，明确告诉TypeScript这是一个对象Schema的定义，而非Schema实例的属性：

修复后的完整代码 #

data: object().shape({
    createPostTypedData: object().shape({
      id: string().required(),
      expiresAt: date().required(),
      typedData: object().shape({
        types: object().shape({
          // 用object().shape()包裹数组元素的结构定义
          PostWithSig: array().of(
            object().shape({
              name: string().required(),
              type: string().required(),
            })
          ),
        }),
        domain: object().shape({
          name: string().required(),
          chainId: number().required(),
          version: string().required(),
          verifyingContract: string().required(),
        }),
        value: object().shape({
          nonce: number().required(),
          deadline: number().required(),
          profileId: string().required(),
          contentURI: string().required(),
          collectModule: string().required(),
          collectModuleInitData: string().required(),
          referenceModule: string().required(),
          referenceModuleInitData: string().required(),
        }),
      }),
    }),
  }),

这样处理后，TypeScript会正确识别type是你要验证的字段，而非Schema的内置属性，类型错误即可消除。

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