TypeScript为何忽略显式undefined类型注解？如何使其生效？

我给myConst显式指定了foo|undefined类型，类型检查显示这行的类型正确为foo|undefined，但下一行中myConst的类型却变成了仅foo，导致TypeScript不强制要求使用?.操作符，进而触发运行时异常。请问这是为什么？有没有办法让TS尊重显式添加的undefined类型？

type foo = {
  foo?: {
    bar?: {
      text: string
    }
  }
};

const fooArray: foo[] = [{foo: {bar: {text: "hi"}}}];

// 类型检查显示类型正确设置为"foo|undefined"
const myConst: foo|undefined = fooArray[1];

// 此处myConst的类型仅为"foo"，而非"foo|undefined"，undefined去哪了？
// 引发运行时错误：Cannot read properties of undefined (reading 'foo') 
const message = myConst.foo?.bar?.text

// 永远不会执行
console.log(message);

原因分析 #

这是因为你没有开启TypeScript的**严格空值检查（strictNullChecks）**选项。当该选项关闭时，TypeScript会将undefined和null视为所有类型的子类型，自动兼容到其他类型中。即便你显式声明了foo|undefined，编译器后续也会忽略undefined分支，不再对空值情况进行校验。

解决方案 #

• 全局开启严格空值检查：在项目的tsconfig.json中设置"strictNullChecks": true（建议开启，这是TS类型安全的核心选项之一）。开启后，myConst会始终保持foo|undefined的类型，访问其属性时TS会强制要求你处理空值情况（比如使用?.或提前判断myConst !== undefined）。
• 单文件临时开启：如果不想全局开启，可在当前文件顶部添加编译指令// @ts-strictNullChecks: true，仅对当前文件启用严格空值检查。

开启后，myConst.foo会直接触发类型错误，必须改为myConst?.foo?.bar?.text，从根源避免运行时的空值访问异常。

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