使用带有 Typescript 的扩展运算符克隆数组答案

【问题标题】：Clone an array using spread operator with Typescript使用带有 Typescript 的扩展运算符克隆数组
【发布时间】：2021-09-02 00:12:56
【问题描述】：

我正在开发一个 Angular 应用程序，我必须更新状态，将新项目添加到数组。

这是状态界面

export interface IState{
  //other fields of the state,
  forces: IForce[] 
}

我要做的是向“forces”字段添加一个新的IForce，同时保留现有值。

这就是我在减速器中所做的：

 on(myAction, (state, {force}) => ({
    ...state,
    forces: [
      ...state.forces,
      force
    ]
  }))

我收到此错误：

This syntax requires an imported helper named '__spreadArray' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'

上线...state.forces

实现我的目标的正确方法是什么？

谢谢大家

【问题讨论】：

【解决方案1】：

如果您不想更新，为什么不使用 concat 来避免该问题。 myArr = myArr.concat(newArr);

【讨论】：

【解决方案2】：

最简单的方法是使用包管理器安装和升级tslib，例如npm install tslib; npm update tslib.

另一种方法是使用数组concat 方法（Doc）。

on(myAction, (state, {force}) => ({
  ...state,
  forces: state.forces.concat([force])
}))

【讨论】：