响应是的错误类型 'undefined' 不能用作索引类型。 TS2538

Question

我正在使用 yup 使表单无效，当它们无效时我希望此函数 return 错误，但它总是在 validationErrors[[=15=]] 中给出错误，它得到类型'undefined'不能用作索引类型

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;

Answer 1

这里的问题是 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 it with non-null assertion operator !:

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

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

响应是的错误类型 'undefined' 不能用作索引类型。 TS2538

React with yup error Type 'undefined' cannot be used as an index type. TS2538

typescript

reactjs

yup

unform