TypeScript中variable?: type与相关写法是否等价及底层原理

一、先给结论：大部分场景表现一致，但有细微差异 #

在函数参数这类场景里，variable?: type和variable: type | undefined = undefined几乎没区别，但在接口、类型别名的属性声明里，两者是不一样的。

1. 函数参数场景：完全等价 #

给函数参数加?:，TypeScript会自动把它的类型设为type | undefined，同时默认值设为undefined。比如下面两个函数的类型签名完全相同：

// 这俩函数的调用方式、类型检查逻辑完全一致
function greet(name?: string) {
  console.log(name ?? 'Guest');
}

function greet2(name: string | undefined = undefined) {
  console.log(name ?? 'Guest');
}

调用时既可以传字符串、传undefined，也可以直接省略这个参数，三种写法都合法。

2. 接口/类型属性场景：不等价 #

这里是核心差异点：

• prop?: type 表示这个属性是可选的——对象字面量里可以完全不写这个属性；
• prop: type | undefined 表示这个属性必须存在，只是值可以是type或者undefined。

看代码示例就懂了：

interface OptionalProp {
  name?: string;
}
const obj1: OptionalProp = {}; // 合法，name可以不写

interface RequiredPropWithUndefined {
  name: string | undefined;
}
const obj2: RequiredPropWithUndefined = {}; // 报错！必须要有name属性
const obj3: RequiredPropWithUndefined = { name: undefined }; // 合法，明确给了undefined值

二、?: type的底层逻辑 #

TypeScript里的?:本质是个「可选修饰符」，它做了两件事：

1. 类型扩展：自动把成员的类型从type变成type | undefined；
2. 结构标记：告诉TypeScript，这个成员不是必须存在的——对象可以没有它，函数调用可以不传它。

在类型检查时，遇到可选成员：

• 如果对象/参数里没有这个成员，TypeScript不会报错；
• 如果有这个成员，它的值必须符合type | undefined的约束。

三、再明确一遍等价性边界 #

• 函数参数：完全等价，?:就是type | undefined = undefined的语法糖；
• 接口/类型属性：不等价，?:是可选属性，type | undefined是必选属性但允许值为undefined；
• 类成员：和接口属性类似，prop?: type允许类实例不初始化这个属性，而prop: type | undefined = undefined要求必须初始化（哪怕设为undefined）。

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