title: How do you use spread operator to overwrite properties in typescript
body: <p>Consider this example</p>
  <pre><code>interface additonalProperties {
    backgroundColor: string,
    color: string,
    [key: string]: string
  }
  
  class StyleObjectMaker implements StyleObjectMaker {
    constructor(className: string, additonalProperties: additonalProperties = {}) {
      this.key = `button`
      this.className = `button${className ? '-' + className : ''}`
      this.property = {
        backgroundColor: colors[className] || colors.default,
        color: colors.default,
        ...additonalProperties
      }
    }
  }
  </code></pre>
  <p>In the above ts is complaining about</p>
  <pre><code>'backgroundColor' is specified more than once, so this usage will be overwritten
  </code></pre>
  <p>And same for</p>
  <pre><code>  color
  </code></pre>
  <p>Any idea how I can fix it? i.e how can I allow to overwrite</p>
  <p>This is how my tsconfig looks</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;noImplicitReturns&quot;: true,
      &quot;noUnusedLocals&quot;: true,
      &quot;outDir&quot;: &quot;dist/ts-out&quot;,
      &quot;sourceMap&quot;: true,
      &quot;strict&quot;: true,
      &quot;target&quot;: &quot;es2017&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;typeRoots&quot;: [&quot;./node_modules/@types&quot;]
    },
    &quot;compileOnSave&quot;: true,
    &quot;include&quot;: [&quot;src&quot;, &quot;index.ts&quot;]
  }
  </code></pre>