响应 yup 错误类型“未定义”不能用作索引类型 TS2538

如何解决响应 yup 错误类型“未定义”不能用作索引类型 TS2538

我正在使用 yup 使表单无效，当它们无效时我希望此函数返回错误，但它总是在validationErrors [error.path] 中给出错误，它得到类型“未定义”不能用作一个索引类型

import { ValidationError } from 'yup';

interface Errors {
  [key: string]: string;
}

export default function getValidationErrors(err: ValidationError): Errors {
  const validationErrors: Errors = {};

  err.inner.forEach(error => {
    validationErrors[error.path] = error.message;
  });

  return validationErrors;
}


----------


Console error: 

    Type 'undefined' cannot be used as an index type.  TS2538
    11 |   err.inner.forEach((error) => {
  > 12 |     validationErrors[error.path] = error.message;
       |                      ^
    13 |   });
    14 |
    15 |   return validationErrors;

解决方法

这里的问题是 ValidationError 的 path 字段是 declared 作为可选：

export default class ValidationError extends Error {
  value: any;
  path?: string; // path?: string | undefined
  type?: string;
  errors: string[];

  params?: Params;

  inner: ValidationError[];
...

这意味着即使它出现在错误对象上，它的值也可以（从打字稿的角度来看）是 undefined。

因此在使用 error.path 作为计算索引值之前，您必须检查它不是 undefined。你要么按预期检查它：

  err.inner.forEach(error => {
    if (typeof error.path !== 'undefined') {
      validationErrors[error.path] = error.message;
    }
  });

或者，如果您绝对确定它可能永远不会是 undefined，您可以使用 type assert ! non-null assertion operator：

  err.inner.forEach(error => {
    validationErrors[error.path!] = error.message;
  });

但请记住，如果您的建议是错误的，则使用类型断言，您将在错误对象中获得 validationErrors.undefined 字段。