在 React 组件中导入对象后，TypeScript 给出“对象可能未定义”错误答案

【问题标题】：TypeScript gives 'Object is possibly undefined' error after importing object in React component在 React 组件中导入对象后，TypeScript 给出“对象可能未定义”错误
【发布时间】：2021-10-21 13:44:17
【问题描述】：

我是 TypeScript 的新手，在导入对象并尝试迭代对象内的数组后，我收到“对象可能未定义”错误。

我尝试使用non-null assertion operator 无效。

Here is a code sandbox。我对使用 ComponentWithProps 在 App 中找到的条件渲染解决方案并不特别满意。这是最好的方法吗？

任何和所有反馈都会很棒！谢谢！

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

可能未定义的对象不是calendar，而是 find 函数调用的结果，它要么是数组元素的类型，要么是未定义的，如 typescript 4.3.5 声明中所示：

find<T>(value: T, ...): T | undefined;

您需要在访问name 属性之前断言它不是未定义的：

let time = calendar.hours.find((thisHour) => thisHour.number === 2);

if (time !== undefined) {
    time = time.name;
}

或者，一个更优雅的解决方案，使用带有后备默认值的||（逻辑或）short circuit evaluation：

let time = calendar.hours.find((thisHour) => thisHour.number === 2)?.name || 'fallbackName';

如果您的后备是 undefined（就像我的第一个解决方案一样），那么您可以只使用 ? optional chaining syntax 而无需其他行：

let time = calendar.hours.find((thisHour) => thisHour.number === 2)?.name;

【讨论】：