Array.find() 可能在 TypeScript 中未定义 [已解决]

Array.find() 可能在 TypeScript 中未定义[已解决]

Array.find() possibly undefined in TypeScript [Solved]

如果永远不会满足回调函数中实现的条件，或者您尚未从回调函数返回值，则该Array.find()方法会返回一个值。undefined要解决这个问题，请使用类型保护
find在访问属性或方法之前检查是否返回了值。

下面是错误如何发生的示例。

索引.ts


const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => {
  return element.id === 2;
});

// ⛔️ Object is possibly 'undefined'.ts(2532)
result.name.toUpperCase();

下面是如何解决“对象可能未定义”错误的方法。

索引.ts


const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => {
  return element.id === 2;
});

// 👇️ result is object or undefined here

if (result !== undefined) {
  // 👇️ result is an object here
  console.log(result.name.toUpperCase());
}

该if语句用作简单的
类型保护。

TypeScript 知道该find()方法返回数组中满足条件的第一个值，或者undefined 如果条件从未满足。

如果我们undefined从变量存储的可能值中排除result，编译器可以确定该变量是一个对象。

我们传递给
Array.find
方法的函数会为数组中的每个元素调用，直到它返回真值或遍历整个数组。

如果回调函数从不返回真值，则该find()方法返回undefined。

find()方法返回的另一个常见原因undefined是我们忘记从我们传递给的回调函数中显式返回一个值
find()。

索引.ts


const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => {
  element.id === 2;
});

console.log(result); // 👉️ undefined

请注意，我们没有使用带有隐式返回的箭头函数，也没有使用return语句。

这意味着回调函数将在每次调用时隐式返回，最终也会返回。 undefinedfind() undefined

确保从回调函数返回一个值，通过使用箭头函数隐式返回或通过显式使用return语句。

索引.ts


const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

// 👇️ implicit return
const result = arr.find((element) => element.id === 2);

find()方法返回的另一种解决方案undefined是使用
可选链接 (?.)。

索引.ts


const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

const result = arr.find((element) => element.id === 2);

// 👇️ "BOB"
console.log(result?.name.toUpperCase());

如果引用等于undefinedor ，则可选链接 (?.) 运算符会短路，而不是抛出错误null。

因此，如果result变量的值为undefined or null，运算符将短路并返回。 undefined

您可以使用此方法访问可能具有
undefinedornull值的深层嵌套属性，而不会出现“对象可能未定义”错误。

–