TypeScript中接口可选属性与显式undefined类型属性的差异

这两种写法看似最终类型都是randomType | undefined，但实际在使用规则和TypeScript的类型检查逻辑上有不少关键差异：

• 属性声明要求不同
  方式1（prop?: randomType）的属性是可选属性，创建接口实例时完全可以不声明这个属性；而方式2（prop: randomType | undefined）要求必须显式声明该属性，只是属性值允许设为undefined。举个例子：

  // 完全合法：m1实例可以不带prop
  const obj1: m1 = {};
  // 报错：m2实例必须包含prop属性，哪怕值是undefined
  const obj2: m2 = {};
  // 合法：m2实例需要显式设置prop为undefined
  const obj2Valid: m2 = { prop: undefined };
  

• 类型兼容性表现不同
  没有prop属性的对象可以直接赋值给m1类型，但不能直接赋值给m2类型。另外在扩展接口时，m1的可选属性可以被子接口转为必填属性，而m2的属性始终处于必填状态（只是允许值为undefined）。

• 解构与存在性逻辑不同
  解构m1类型的对象时，TypeScript会认为prop可能根本不存在；而解构m2类型的对象时，TypeScript确定prop属性一定存在，只是值可能是undefined。

• IntelliSense视觉区分
  正如你观察到的，悬停属性时两种写法的undefined高亮颜色不同，这是因为TypeScript内部对“可选属性自带的undefined”和“显式联合的undefined”做了标记区分，属于编辑器提示层面的视觉差异。

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