TypeScript已做空值校验仍报Null safety错误（Angular12+Nx场景）

报错原因 #

你遇到的报错是TypeScript严格空值校验下的常见类型收窄限制，触发原因主要有两个：

• 你校验的是类的实例属性this.cytograph，TypeScript无法保证在if判断完成到函数调用的间隙，该属性不会被其他异步逻辑、副作用操作修改为null，因此无法完成深层属性的非空收窄
• Angular 12内置的TypeScript版本对嵌套对象属性的类型收窄逻辑存在局限性，即便你显式做了两层非空判断，也可能无法被类型系统正确识别

解决方案 #

方案1（最推荐，无类型安全风险） #

将对象提前赋值给局部变量，TypeScript可以100%跟踪局部变量的类型变化，不会受外部副作用影响：

const cytograph = this.cytograph
if (cytograph != null && cytograph.removeFullLabelFn != null) {
  cytograph.removeFullLabelFn({ target: null, type: 'mouseout' });
}

也可以简化为可选链写法，和你原有的if判断逻辑完全等价，且符合TypeScript类型校验规则：

this.cytograph?.removeFullLabelFn?.({ target: null, type: 'mouseout' })

方案2（适用于你100%确认运行时该函数一定存在的场景） #

使用非空断言操作符!手动告诉类型系统该值一定不为空：

if (this.cytograph != null && this.cytograph.removeFullLabelFn != null) {
  this.cytograph.removeFullLabelFn!({ target: null, type: 'mouseout' });
}

注意该操作符相当于跳过了类型校验，你需要自行保证运行时该值非空，否则会触发JS运行时错误。

方案3（不推荐，仅作兼容参考） #

如果是老旧项目临时兼容，可以调整tsconfig.json中的配置关闭严格空校验，但会丢失整个项目的空值检查能力：

{
  "compilerOptions": {
    "strictNullChecks": false
  }
}

内容的提问来源于stack exchange，提问作者canbax