TypeScript中如何强制访问可选属性时必须使用可选链

直接访问可选属性下辖属性/方法无类型报错的问题，本质是TypeScript默认未开启严格空值检查导致的，可以通过两层配置强制拦截这类风险代码：

1. 配置TypeScript编译器选项 #

在项目的tsconfig.json中开启严格空值校验，这是最核心的解决方式：

{
  "compilerOptions": {
    // 推荐直接开启完整严格模式，会自动包含strictNullChecks配置
    "strict": true,
    // 如果不想开全量严格模式，可单独开启下面的空值检查配置
    // "strictNullChecks": true
  }
}

开启该配置后，TypeScript会自动将可选属性的类型推导为声明类型 | undefined，示例中直接写foo.bar.map()的代码会被直接标红报错，提示foo.bar可能为undefined，强制开发者显式处理空值场景。

如果开启后依然没有报错，优先检查tsconfig.json的include字段是否覆盖了你当前编写的代码文件，未纳入编译范围的文件不会触发类型校验。

2. 配置ESLint规则做补充校验 #

如果需要更严格的编码约束，防止开发者通过非空断言!、as any等写法绕过TS校验，可以搭配@typescript-eslint的规则做拦截：
首先确保项目已安装@typescript-eslint/parser和@typescript-eslint/eslint-plugin依赖，之后在ESLint配置文件中添加以下规则：

{
  "rules": {
    // 禁止在可能为null/undefined的值上直接访问成员、调用方法
    "@typescript-eslint/no-unnecessary-condition": "error",
    // 限制非空断言的滥用，避免开发者随意跳过空值检查
    "@typescript-eslint/no-non-null-assertion": "warn"
  }
}

合规的安全写法参考 #

配置完成后，可以通过以下几种安全的方式访问可选属性，避免运行时崩溃：

type Example = {
    bar?: string[]
}

const foo: Example = {}

// 写法1：可选链，bar为undefined时短路返回undefined，不会执行后续map调用
foo.bar?.map(string => string.toUpperCase())

// 写法2：提前做类型收窄判断
if (Array.isArray(foo.bar)) {
  foo.bar.map(string => string.toUpperCase())
}

// 写法3：空值合并设置兜底默认值
(foo.bar ?? []).map(string => string.toUpperCase())

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