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" },
];

我的前置类型对象thingy：

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

第一次尝试：

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

编辑器中的错误：

property) kvpzero: KeyValuePair Type '{length: number; toString(): 字符串； toLocaleString(): 字符串； pop(): KeyValuePair; push(...items: KeyValuePair[]): number; concat(...items: ConcatArray[]): KeyValuePair[]; concat(...items: (KeyValuePair | ConcatArray<...>)[]): KeyValuePair[]; ……还有 26 个……； kvpzero: 键值对； }' 不可分配给类型 'KeyValuePair[]'。 对象字面量只能指定已知属性，并且类型 'KeyValuePair[]'.ts(2322) 中不存在 'kvpzero'

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

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()一下，好像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 ];