TypeScript 2.0中如何解构函数参数对象并使用...rest？

嘿，针对你在TypeScript 2.0里实现这个带命名参数、可选值和剩余参数捕获的函数需求，我给你梳理下最佳实现方式！

首先，咱们先明确核心需求：函数接收一个对象作为参数，其中a是必填的字符串类型，b是可选的数值类型（你伪代码里默认值写了'hello'，这里可能是笔误，我先按数值类型给你演示，后面会提类型匹配的注意点），同时要能捕获所有额外传入的参数，还要支持给可选参数设置默认值。

步骤1：定义参数接口 #

先把必填和可选的参数类型用接口明确下来，这是TypeScript类型约束的基础：

interface IMyProps {
  a: string; // 必填的字符串参数
  b?: number; // 可选的数值参数
}

步骤2：实现函数逻辑 #

在TS2.0里，我们可以用交叉类型把自定义接口和任意剩余属性的类型结合起来，确保函数参数既满足我们定义的类型要求，又能接受额外的任意属性。然后通过对象解构赋值来提取参数、设置默认值，同时捕获剩余参数：

const myfun1 = (p: IMyProps & { [key: string]: any }) => {
  // 解构赋值：提取a，给b设置默认值0，剩下的参数存入rest
  const { a, b = 0, ...rest } = p;

  // 这里就可以正常使用a、b和rest了
  console.log(`必填参数a: ${a}`);
  console.log(`可选参数b（默认0）: ${b}`);
  console.log(`剩余参数:`, rest);
};

调用示例 #

这样写的函数完全支持命名参数调用，各种场景都能覆盖：

// 只传必填的a
myfun1({ a: "hello world" });
// 输出：必填参数a: hello world；可选参数b（默认0）: 0；剩余参数: {}

// 传a和可选的b
myfun1({ a: "test", b: 123 });
// 输出：必填参数a: test；可选参数b（默认0）: 123；剩余参数: {}

// 传a、b和额外参数
myfun1({ a: "demo", b: 456, c: "extra1", d: true });
// 输出：必填参数a: demo；可选参数b（默认0）: 456；剩余参数: { c: 'extra1', d: true }

关于类型匹配的小提醒 #

你伪代码里给b设置的默认值是'hello'字符串，但b的类型定义是number，这会触发TypeScript的类型错误。如果确实需要给b设置字符串默认值，得把接口里的b类型改成number | string：

interface IMyProps {
  a: string;
  b?: number | string; // 允许数值或字符串类型
}

const myfun1 = (p: IMyProps & { [key: string]: any }) => {
  const { a, b = 'hello', ...rest } = p; // 现在默认值字符串就符合类型了
};

这种实现方式完全贴合TS2.0的特性：交叉类型用来扩展参数类型、对象解构赋值处理参数提取和默认值、剩余操作符捕获额外参数，完美满足你要的命名参数、可选值、默认值和剩余参数捕获的需求。

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