TypeScript 将对象添加到具有扩展的数组

Question

我试图让 TypeScript 和数组变得可爱，并使用扩展运算符实质上将对象添加到对象数组中。

设置如下：

定义我的类型的接口：

interface KeyValuePair {
  key: string;
  value: string;
}

类型的对象数组：

const kvpset: KeyValuePair[] = [
  { key: "1", value: "One" },
  { key: "2", value: "Two" },
  { key: "3", value: "Three" },
  { key: "4", value: "Four" },
  { key: "5", value: "Five" },
  { key: "6", value: "Six" },
  { key: "7", value: "Seven" },
  { key: "8", value: "Eight" },
  { key: "9", value: "Nine" },
];

我的前置类型对象的东西：

const kvpzero: KeyValuePair = { key: "0", value: "Zero" };

第一次尝试：

const kvpAll: KeyValuePair[] = { kvpzero, ...kvpset };

编辑器出错：

property) kvpzero: KeyValuePair Type '{ 长度: 数字; toString(): 细绳; toLocaleString(): 字符串；弹出（）：键值对；推（...项目： KeyValuePair[])：数字；连接（...项目： ConcatArray[]): KeyValuePair[];连接（...项目： (KeyValuePair | ConcatArray<...>)[]): KeyValuePair[]; ... 26 更多 ...; kvpzero：键值对； }' 不可分配给类型 'KeyValuePair[]'。 对象字面量只能指定已知属性，而 'kvpzero' 可以 'KeyValuePair[]'.ts(2322) 类型中不存在

好吧，我有点不知所措。我会试试这个：

const kvpzeroAsArray: KeyValuePair[] = [{ key: "0", value: "Zero" }];

这不会给出“编译器错误”：

const kvpAll: KeyValuePair[] = { ...kvpzeroAsArray, ...kvpset };

使用 tsc 和 node 来运行它（编辑器是 Visual Studio Code）。生成 kvpAll 对象的 console.log()：

kvpAll is {
  '0': { key: '1', value: 'One' },
  '1': { key: '2', value: 'Two' },
  '2': { key: '3', value: 'Three' },
  '3': { key: '4', value: 'Four' },
  '4': { key: '5', value: 'Five' },
  '5': { key: '6', value: 'Six' },
  '6': { key: '7', value: 'Seven' },
  '7': { key: '8', value: 'Eight' },
  '8': { key: '9', value: 'Nine' }
}

我在这里看到的三件事。一，对象现在是一个对象，而不是一个数组。二，我的零丢失了。我不知道为什么这不起作用或为什么我不能得到预期的结果。第三，它甚至不是我想要的那种类型的输出。它具有作为数字的属性，作为对象的值。 '0': { key: '1', value: 'One' } 而不仅仅是 { key: '1', value: 'One' }。

在网上搜索，似乎Object.assign()机制是一种方法。

const assignedkvp = (<any>Object).assign(kvpzeroAsArray, kvpset);

输出（再次通过console.log()）：

assignedkvp is [
  { key: '1', value: 'One' },
  { key: '2', value: 'Two' },
  { key: '3', value: 'Three' },
  { key: '4', value: 'Four' },
  { key: '5', value: 'Five' },
  { key: '6', value: 'Six' },
  { key: '7', value: 'Seven' },
  { key: '8', value: 'Eight' },
  { key: '9', value: 'Nine' }
]

嗯...与传播类似的结果。对象不会随着传播的改变而改变，但我仍然看不到我想要的假装结果。

我在这一点上不知所措。我不明白如何使用扩展运算符或分配函数并获得所需的结果。我会很感激任何见解。这是我目前的解决方案。蛮力法：

const prePendObjectToArray = <T>(object: T, array: T[]): T[] => {
  let returnArray = [] as T[];

  if (array && array.length > 0 && object) {
    for (let i = 0; i < array.length + 1; i++) {
      if (i === 0) {
        returnArray.push(object);
      } else {
        returnArray.push(array[i - 1]);
      }
    }
  }

  return returnArray;
};

用法：

const newArray = prePendObjectToArray(kvpzero, kvpset);
console.log(newArray);

结果：

[
  { key: '0', value: 'Zero' },
  { key: '1', value: 'One' },
  { key: '2', value: 'Two' },
  { key: '3', value: 'Three' },
  { key: '4', value: 'Four' },
  { key: '5', value: 'Five' },
  { key: '6', value: 'Six' },
  { key: '7', value: 'Seven' },
  { key: '8', value: 'Eight' },
  { key: '9', value: 'Nine' }
]

如果有更好的方法，我会很感激知道我错过了什么。

Answer 1

const kvpAll: KeyValuePair[] = { ...kvpzeroAsArray, ...kvpset };

这不是一个数组。你正在向一个物体扩散。

做：

const kvpAll: KeyValuePair[] = [ ...kvpzeroAsArray, kvpset ];