在打字稿中使用扩展运算符

Question

我想编写一个函数，它返回一个包裹在另一个组件中的组件。我正在尝试编写的函数如下所示。

function GetGroup({ name, text, isRequired, ...props }) 

这里，name、text 和 isRequired 是从传递的参数中获取的，其他的则作为 props 发送到另一个组件。

如何用 TypeScript 编写？

Answer 1

function GetGroup({ name, text, isRequired, ...props }: { name: string; text: string; isRequired: boolean; other: number; arg: string }) {
  props.other // number
  props.arg // string
}

TypeScript 只是添加类型。name、text 和 isRequired 是普通参数。另一方面，props 是其余的论点。因此，无论剩余的参数如何，都假定为声明的其余类型。

Answer 2

首先，Object Rest/Spread 是一个提议的 ECMAScript 功能，它正在走向标准化，已经达到第 4 阶段，and is in the process of being formally adopted。

正如您从它的用法中知道的那样，它使得使用纯 JavaScript 对象变得异常灵活。

TypeScript 2.1 文档中提供了有关该功能类型的信息。正如它非常雄辩地指出：

对象休息是对象扩展的对偶，因为它们可以提取在解构元素时不会被拾取的任何额外属性：

确实有两个功能在发挥作用，一个是互补的。

对象休息

当使用该特性的 Rest 部分时，它通过使我们能够将其余属性收集到由它们组成的新对象中来增强对象解构。

我们可以像编写任何其他值一样编写类型注释。例如

interface GroupProperties {
  name: string;
  text: string;
  isRequired?: boolean;
  values: string[];
  flagged: boolean;
}

function Group({ name, text, isRequired, ...rest }: GroupProperties) {
  console.log(rest);
}

这会通知类型系统name 和text 属于string 类型，而is required 属于boolean 类型。 然后类型系统进一步知道rest 有两个属性，values 和flagged 分别属于boolean 和string 类型。推导出rest的类型。

对象传播

当使用该特性的 Spread 部分时，它通过支持从多个来源声明式构造对象、轻松创建派生以及轻松取消定义和覆盖来增强对象构造。

类型系统还理解 Spread 表达式的含义并推断出它们求值的类型。

const o = {x: 1, y: 'hello'};

const o1 = {
  ...o,
  y: 1
};

在上面，o1 的类型为{x: number, y: number}。