为何Angular的DOM操作没有TypeScript那样的类型安全校验？

差异核心原因：两个项目的TypeScript编译配置不同 #

原生TS场景报错的原因 #

document.querySelector() 方法的原生类型定义返回值就是 Element | null，当你的TS配置中开启了 strictNullChecks（属于strict严格模式下的子配置项）时，TS会强制校验所有可能为null/undefined的值的安全性，你直接访问x.href没有提前判空，自然就会触发Object is possibly null的报错。
对应代码示例：

let x = document.querySelector('a');
console.log(x.href); // 开启strictNullChecks时必报错

Angular场景不报错的原因 #

Angular项目默认不会自动开启严格类型检查，尤其是Angular 12之前的版本，执行ng new创建项目时默认关闭所有严格校验规则：

• 根目录tsconfig.json中strict配置为false
• 单独的strictNullChecks也默认是false
  这种情况下TS会忽略null/undefined的类型校验，哪怕x可能为null，也不会触发编译报错。

如果你给Angular项目开启严格模式，执行ng new --strict创建项目，或者手动把tsconfig.json中的strictNullChecks改为true，同样会收到和原生TS场景一致的报错。

ngOnInit() {
  let x = document.querySelector('a');
  console.log(x.href); // 开启strictNullChecks后Angular项目也会报错
}

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