场景
分析
可选链(?.)
可选链操作符允许你安全地访问对象的嵌套属性,即使其中间的一个属性可能不存在也不会抛出错误。如果globalAlertDetail是一个对象并且它有isShow属性,那么globalAlertDetail?.isShow会返回该属性的值。如果globalAlertDetail不存在或isShow属性不存在,表达式会返回undefined而不是抛出一个类型错误。
非空断言(!)
非空断言操作符用于告诉TypeScript编译器你确信某个表达式的值不是null或undefined。这通常用于强制类型检查忽略可能的null或undefined值。然而,在运行时,如果你对一个实际为undefined或null的值使用非空断言,那么可能会引发运行时错误,因为JavaScript引擎会尝试访问不存在的属性。
结合使用
当你写 globalAlertDetail?.isShow! 时,你是在告诉TypeScript(或其他支持此语法的环境):“尝试获取globalAlertDetail的isShow属性,但如果globalAlertDetail是undefined或null,不要抛出错误。然而,我保证如果globalAlertDetail存在,那么它一定有isShow属性。”
这意味着如果globalAlertDetail是undefined或null,globalAlertDetail?.isShow会返回undefined,但!会导致之后的代码试图使用isShow的值,这可能会引发运行时错误,例如Cannot read properties of undefined (reading ‘isShow’)。
或者标题类似错误
解决方案
1.使用这样的表达式需要确保globalAlertDetail确实存在并有isShow属性,否则你需要有处理undefined的逻辑,例如使用逻辑与操作符(&&):
const isShow = globalAlertDetail && globalAlertDetail.isShow;
2.使用可选链和逻辑或操作符(||)提供一个默认值:
const isShow = globalAlertDetail?.isShow || false;