javascript - 在 typescript 中使用扩展运算符

Question

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

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

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

如何用 TypeScript 编写？

Answer 1

因此，首先，Object Rest/Spread 是一项提议的 ECMAScript 功能，该功能正朝着标准化的方向发展，已达到第 4 阶段，and is in the process of being formally adopted .

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

有关特征类型的信息可在 TypeScript 2.1 中找到。文档。正如它非常 Eloquent 地指出的那样:

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 类型并且是必需的 是输入 bool 值。然后类型系统知道 rest 有两个属性，values 和 flagged 类型 boolean 和 字符串分别。推导出rest的类型。

对象传播

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

类型系统也理解 Spread 表达式的含义并推断它们计算的类型。

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

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

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