在打字稿中使用传播算子

Question

我想编写一个函数，使我返回包裹在另一个组件中的组件。我尝试编写的功能类似于下面的JavaScript。

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

这里，name，text，和isRequired从传递的参数获得的和其他被送到另一个部件如props。

如何用TypeScript编写它？

Answer 1

因此，首先，Object Rest / Spread是ECMAScript提出的一项功能，该功能正处于标准化阶段，已达到第4阶段，并且正在被正式采用。

如您所知，它使使用纯JavaScript对象变得异常灵活。

TypeScript 2.1文档中提供了有关功能键入的信息。正如它雄辩地指出：

对象休止符是对象散布的双重属性，因为它们可以提取在分解元素时不会拾取的任何其他属性：

实际上，实际上有两个功能在起作用，一个是互补的。

物体休息

使用功能的其余部分时，它使我们能够将其余属性收集到由它们组成的新对象中，从而增强了对象的结构分解。

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

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表达式的含义，并推断出它们所求值的类型。

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

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

在上面，o1具有type {x: number, y: number}。