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 ];