TypeScript 在 React 组件中导入对象后出现'Object is possibly undefined'错误

Question

我是TypeScript新手，在导入对象并尝试遍历对象内的数组后，我得到了'Object is possibly undefined'错误。

我尝试使用非空断言操作符，但没有效果。

这是一个代码沙箱。我不是特别满意的条件渲染解决方案中发现的App与ComponentWithProps。这是最好的方法吗?

任何和所有的反馈将是伟大的!谢谢你！

Answer 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;
}

或者，一个更优雅的解决方案，使用||(逻辑或)短路评估提供了一个备用默认值:

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

如果你的回退是undefined(就像我的第一个解决方案)，那么你可以只使用?可选的链接语法，而不需要剩下的行:

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