如何配置TypeScript，使访问非必存属性返回undefined而非any与报错？

问题场景 #

联合类型属性访问示例 #

编写如下TypeScript代码：

type A = {
    x: number;
} | {
    y: number;
}

const a = { x: 0 } as A;
const b = a.x;

运行时触发报错：

Property 'x' does not exist on type 'A'.
  Property 'x' does not exist on type '{ y: number; }'.ts(2339)

此时变量b的类型被推断为any。但在原生JavaScript中，访问不存在的属性会得到undefined，因此期望TypeScript将b的类型推断为number | undefined，而非抛出错误或返回any。

空对象属性访问示例 #

更简单的场景：

const bar = ({}).foo;

在JavaScript中bar实际为undefined，但TypeScript默认将其识别为any类型。

解决方案 #

1. 配置tsconfig.json核心选项 #

需要在项目的tsconfig.json中启用以下配置：

• strictNullChecks: true: 开启后TypeScript会严格区分null/undefined与其他类型，是实现预期行为的基础。
• noImplicitAny: true: 禁止隐式推断出any类型，强制TypeScript为未定义属性提供明确的undefined类型推断。
• exactOptionalPropertyTypes: true（可选）: 让可选属性的类型严格对应T | undefined，避免将缺失属性与可选属性混淆，进一步强化类型安全性。

示例tsconfig.json片段：

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": true,
    "exactOptionalPropertyTypes": true,
    // 其他配置...
  }
}

2. 代码层面调整（针对联合类型场景） #

对于联合类型的属性访问，直接访问会触发类型检查错误，需要使用可选链操作符?.来告诉TypeScript该属性可能不存在，此时类型会自动推断为number | undefined：

type A = {
    x: number;
} | {
    y: number;
}

const a = { x: 0 } as A;
const b = a?.x; // 类型为number | undefined，无报错

可选链操作符在运行时的行为与原生JavaScript一致：属性存在时返回对应值，不存在时返回undefined，同时TypeScript会正确推断类型。

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