TypeScript两种函数参数定义的差异及适用场景咨询

核心差异 #

1. 参数结构与类型要求 #

• 第一种写法：

  export default function myFunc(data: MyDataType) {}
  

  函数接收单个参数，类型直接为MyDataType——该类型可以是对象、基本类型（如string/number）、联合类型等，调用时直接传入符合MyDataType规则的任意值即可。

• 第二种写法：

  export default function myFunc({ data }: { data: MyDataType }) {}
  

  函数接收一个对象参数，并通过对象解构直接取出data属性；要求传入的对象必须包含类型为MyDataType的data字段，调用时必须以{ data: 具体值 }的形式传参。

2. 调用方式不同 #

• 第一种调用示例：

  const myData: MyDataType = {/* ... */};
  myFunc(myData);
  

• 第二种调用示例：

  const myData: MyDataType = {/* ... */};
  myFunc({ data: myData });
  

3. 默认值与可选参数处理 #

• 第一种给参数加默认值：

  function myFunc(data: MyDataType = defaultData) {}
  

  直接给参数本身赋值即可，不传参数时自动使用默认值。

• 第二种解构时加默认值（需给整个对象参数加默认空对象，避免不传参数时报错）：

  function myFunc({ data = defaultData }: { data?: MyDataType } = {}) {}
  

  可以给单个解构属性加默认值，且支持只传需要覆盖的参数。

优势与适用场景 #

第一种写法 #

• 优势：参数传递直接，代码精简，调用成本低。
• 适用场景：
  • 函数仅依赖单一数据，且该数据无需包裹在对象中（比如直接传字符串、数字，或一个独立的业务对象）；
  • 追求极简调用方式，不需要额外的对象包裹。

第二种写法 #

• 优势：参数语义清晰，后续扩展灵活，可避免参数顺序混乱。
• 适用场景：
  • 函数需要接收多个参数时，后续新增参数只需在解构对象中添加，无需修改参数列表顺序（不会破坏原有调用代码）；
  • 调用时需要明确参数含义（比如myFunc({ data: x, timeout: 1000 })，一眼能看懂每个参数的作用）；
  • 需要给多个可选参数设置默认值时，可只传需要覆盖的参数，不用按顺序传undefined占位。

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