title: TypeScript add object to array with spread
body: <p>I'm trying to be cute with TypeScript and arrays and use the spread operator to essentially prepend an object to an array of objects.</p>
  <p>Here's the setup:</p>
  <p>Interface to define my types:</p>
  <pre><code>interface KeyValuePair {
    key: string;
    value: string;
  }
  </code></pre>
  <p>An array of objects of type:</p>
  <pre><code>const kvpset: KeyValuePair[] = [
    { key: &quot;1&quot;, value: &quot;One&quot; },
    { key: &quot;2&quot;, value: &quot;Two&quot; },
    { key: &quot;3&quot;, value: &quot;Three&quot; },
    { key: &quot;4&quot;, value: &quot;Four&quot; },
    { key: &quot;5&quot;, value: &quot;Five&quot; },
    { key: &quot;6&quot;, value: &quot;Six&quot; },
    { key: &quot;7&quot;, value: &quot;Seven&quot; },
    { key: &quot;8&quot;, value: &quot;Eight&quot; },
    { key: &quot;9&quot;, value: &quot;Nine&quot; },
  ];
  </code></pre>
  <p>My prepend typed object thingy:</p>
  <pre><code>const kvpzero: KeyValuePair = { key: &quot;0&quot;, value: &quot;Zero&quot; };
  </code></pre>
  <p>First try:</p>
  <pre><code>const kvpAll: KeyValuePair[] = { kvpzero, ...kvpset };
  </code></pre>
  <p>Error in the editor:</p>
  <blockquote>
  <p>property) kvpzero: KeyValuePair Type '{ length: number; toString():
  string; toLocaleString(): string; pop(): KeyValuePair; push(...items:
  KeyValuePair[]): number; concat(...items:
  ConcatArray[]): KeyValuePair[]; concat(...items:
  (KeyValuePair | ConcatArray&lt;...&gt;)[]): KeyValuePair[]; ... 26 more ...;
  kvpzero: KeyValuePair; }' is not assignable to type 'KeyValuePair[]'.
  Object literal may only specify known properties, and 'kvpzero' does
  not exist in type 'KeyValuePair[]'.ts(2322)</p>
  </blockquote>
  <p>Okay, so I'm a bit clueless. I'll try this:</p>
  <pre><code>const kvpzeroAsArray: KeyValuePair[] = [{ key: &quot;0&quot;, value: &quot;Zero&quot; }];
  </code></pre>
  <p>and this doesn't give a &quot;compiler error&quot;:</p>
  <pre><code>const kvpAll: KeyValuePair[] = { ...kvpzeroAsArray, ...kvpset };
  </code></pre>
  <p>Using tsc and node to run it (editor is Visual Studio Code). Results in a console.log() for the kvpAll object:</p>
  <pre><code>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' }
  }
  </code></pre>
  <p>Three things that I see here. One, the object is now an object and not an array. Two, my zero is missing.I have no idea why this doesn't work or why I can't get the expected results. Three, it's not even the same type of output I wanted. It has the property as a number with the value as the object. <code>'0': { key: '1', value: 'One' }</code> instead of just <code>{ key: '1', value: 'One' }</code>.</p>
  <p>Searching on the web, it seems that maybe the <code>Object.assign()</code> mechanism is a way to go.</p>
  <pre><code>const assignedkvp = (&lt;any&gt;Object).assign(kvpzeroAsArray, kvpset);
  </code></pre>
  <p>Output (via a <code>console.log()</code> again):</p>
  <pre><code>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' }
  ]
  </code></pre>
  <p>Hmm...similar results as the spread. The object doesn't get changed as the spread changes it, but I still don't see my desired pretending result.</p>
  <p>I'm at a loss at this point. I don't understand how I can use the spread operator or the assign function and get the desired results. I'd appreciate any insight. Here's my current solution. The brute force method:</p>
  <pre><code>const prePendObjectToArray = &lt;T&gt;(object: T, array: T[]): T[] =&gt; {
    let returnArray = [] as T[];
  
    if (array &amp;&amp; array.length &gt; 0 &amp;&amp; object) {
      for (let i = 0; i &lt; array.length + 1; i++) {
        if (i === 0) {
          returnArray.push(object);
        } else {
          returnArray.push(array[i - 1]);
        }
      }
    }
  
    return returnArray;
  };
  </code></pre>
  <p>Usage:</p>
  <pre><code>const newArray = prePendObjectToArray(kvpzero, kvpset);
  console.log(newArray);
  </code></pre>
  <p>Result:</p>
  <pre><code>[
    { 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' }
  ]
  </code></pre>
  <p>If there is a better way, I'd appreciate knowing what I'm missing.</p>