为什么TypeScript中联合类型与可选属性的类型收窄行为不一致？

场景复现代码 #

type Dialog1 = { id?: string };

type VisibleDialog = { id: string };
type DestroyedDialog = {};
type Dialog2 = VisibleDialog | DestroyedDialog;

function remove1(dialog: Dialog1) {
  if (!dialog.id) {
    return;
  } 
  document.getElementById(dialog.id); // dialog类型为Dialog1，id为string
  setTimeout(() => {
    // 报错：类型“string | undefined”的参数不能赋给类型“string”的参数
    document.getElementById(dialog.id);
  });
}

function remove2(dialog: Dialog2) {
  if (!("id" in dialog)) {
    return;
  }
  document.getElementById(dialog.id); // dialog类型收窄为VisibleDialog
  setTimeout(() => {
    document.getElementById(dialog.id); // 无报错，dialog依然被识别为VisibleDialog
  });
}

差异核心原因 #

两者的收窄属于TypeScript完全不同的两种类型缩小场景，底层判断逻辑完全不同：

1. Dialog1 可选属性收窄的失效逻辑 #

Dialog1的id是可选属性，if (!dialog.id) return属于单个属性值的存在性校验，仅完成了对该属性的临时类型收窄。
TypeScript不会假设闭包捕获的可变对象的属性值在异步执行过程中不变——你完全可以在setTimeout回调触发前，在外层修改dialog.id = undefined，因此为了保证类型安全，TypeScript在异步回调中会自动将该属性的收窄结果重置为原始的string | undefined类型。
如果需要在异步回调中沿用收窄结果，只需要将属性值存入局部常量即可，局部常量的值无法被修改，TypeScript可以保证类型稳定：

function remove1(dialog: Dialog1) {
  if (!dialog.id) return;
  const id = dialog.id;
  setTimeout(() => {
    document.getElementById(id); // 无报错
  });
}

2. Dialog2 联合类型收窄的延续逻辑 #

Dialog2是VisibleDialog和DestroyedDialog的联合类型，if (!("id" in dialog)) return属于联合类型的分型判断，直接将dialog的整体类型从联合类型收窄为确定的VisibleDialog类型。
VisibleDialog的类型定义本身就约定了id是必选的string类型，TypeScript对联合类型的分型收窄优先级更高：只要通过了分型判断，就默认开发者会遵守该类型的结构约定，不会主动修改对象结构破坏类型定义，因此收窄结果会同步延续到异步回调中，不会被重置。
注意：该逻辑确实和运行时存在偏差，如果你强行删除dialog的id属性或将其赋值为undefined，TypeScript不会主动检测这种违反类型约定的操作，运行时依然可能报错。

底层设计原则 #

TypeScript的类型收窄核心遵循「仅做可100%确定的安全推导」原则：

• 对于可变对象的单个属性收窄，异步场景下无法保证属性值不被修改，因此主动重置收窄结果
• 对于联合类型的整体分型收窄，默认类型约定不会被主动破坏，因此收窄结果长期有效

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