答案。

函数的可选参数通过在参数名称后面加上问号 (?) 来指示。对象（接口或类型）中的可选属性也是如此。

对于函数：

function greet(name?: string) {
  console.log(`Hello, ${name ?? '陌生人'}`);
}
greet(); // Hello, 陌生人
greet('John'); // Hello, John

对于对象：

interface User {
  id: number;
  nickname?: string;
}
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: 'Bob' };

细节：

可选参数 — 调用函数时可以不传递，那么值将为 undefined。
可选属性 — 该属性可能在对象中缺失。
不要混淆：如果在接口中未将属性标记为可选，则它是必需的！
可选参数必须放在函数参数列表的最后。

有陷阱的问题。

如果函数声明为可选参数类型 string (function fn(x?: string))，是否可以显式调用它以 undefined 作为参数？fn() 和 fn(undefined) 有何不同？

答案： 是的，可以使用 undefined 调用：fn(undefined) 和 fn() — 结果是一样的，但函数内部将接收到 x === undefined。如果在函数签名中定义了默认值：

function fn(x: string = 'demo') {
  console.log(x);
}
fn(); // demo
fn(undefined); // demo
fn('abc'); // abc

而如果参数没有被标记为可选（没有 ? 或默认值），调用 fn() 将会导致编译错误。

由于对主题细节的不熟悉而导致的真实错误示例。

故事

在接口 user 中指定了属性 phone: string（没有 ?），但是在创建对象实例时忘记添加它。结果 TypeScript 编译器开始抱怨缺少必需属性。临时解决方案是添加 phone: undefined，但这与类型相悖，因为 string !== undefined，这导致了更多的验证错误。

故事

在函数中定义了多个可选参数，但将它们放置在参数列表的末尾以外。TypeScript 因此给出了错误提示，并且在重新排列参数后，传入的值与参数的对应顺序发生了变化，导致混乱和函数工作不正常。

故事

在描述外部 API 数据类型时，忘记在接口中添加可选字段（例如，客户姓氏? string），导致在更改模式时一边不再接收这些字段，而另一边在尝试无检查地读取它们时，代码崩溃。

在 TypeScript 中，可选参数和可选属性是如何工作的，它们有什么区别，使用时有哪些细节？请举例说明常见的问题和错误。

答案。

有陷阱的问题。

由于对主题细节的不熟悉而导致的真实错误示例。