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

Question

我想编写一个函数，returns 我将一个组件包裹在另一个组件中。我要编写的函数如下 JavaScript.

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

因此，首先，对象 Rest/Spread 是一项提议的 ECMAScript 功能，该功能正处于标准化阶段，已达到第 4 阶段，and is in the process of being formally adopted。

正如您从其用法中了解到的那样，它使处理普通 JavaScript 对象变得异常灵活。

有关功能类型的信息可在 TypeScript 2.1 文档中找到。正如它非常雄辩地指出：

Object rests are the dual of object spreads, in that they can extract any extra properties that don’t get picked up when destructuring an element:

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

对象休息

当使用该功能的 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}。

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

using spread operator in typescript

javascript

typescript

ecmascript-next