为何WebStorm中TypeScript未对null值进行类型检查？

问题复现 #

type Person = {
  name: string | null,
  age: number | null,
  contacts: {
    phone: number | null,
    email: string | null
  } | null
}

const emptyPerson: Person = {
  name: null,
  age: null,
  contacts: null
}

// 预期会提示`contacts`可能为null，但本地未触发错误
console.log(emptyPerson.contacts.email)

上述代码中，emptyPerson.contacts被显式赋值为null，但访问其email属性时，本地TypeScript环境未给出任何错误提示，而TypeScript Playground中运行相同代码则能正常触发Object is possibly 'null'的错误。

核心原因 #

这种差异几乎都是本地项目TypeScript配置与Playground默认配置不一致导致的，具体来说是以下关键配置项的问题：

• strictNullChecks未启用：Playground默认开启strict模式（包含strictNullChecks: true），此时TypeScript会严格区分null/undefined与其他类型，禁止直接访问可能为null的属性。而如果本地tsconfig.json中strictNullChecks设为false，TypeScript会将null视为所有类型的子类型，不会对这类访问报错。
• strict模式未启用：strict模式是一组严格检查规则的集合，包含strictNullChecks，如果本地关闭了strict模式，也会出现这种宽松的类型检查行为。

解决方案 #

1. 启用严格空值检查（推荐） #

修改项目根目录的tsconfig.json，确保启用strictNullChecks或直接开启strict模式：

{
  "compilerOptions": {
    // 方式1：单独启用空值检查
    "strictNullChecks": true,
    // 方式2：启用全部严格检查（更推荐，包含空值检查等多项规则）
    "strict": true
  }
}

启用后，TypeScript会立即对emptyPerson.contacts.email这类访问抛出错误，符合预期行为。

2. 手动添加类型守卫（临时兼容方案） #

如果暂时无法修改全局配置，可以通过类型守卫手动确保contacts不为null后再访问属性：

// 条件判断式类型守卫
if (emptyPerson.contacts) {
  console.log(emptyPerson.contacts.email);
}

// 可选链操作符（安全访问，避免运行时错误）
console.log(emptyPerson.contacts?.email);

// 非空断言（仅在确定`contacts`绝对不为null时使用，有运行时风险）
console.log(emptyPerson.contacts!.email);

3. 对齐Playground配置 #

对比本地tsconfig.json与Playground的配置，确保所有严格检查相关的配置项一致，避免因配置差异导致的行为不同。

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