title: Can I Override a Key in a TypeScript Interface?
body: <p>I know how to extend a TypeScript interface, but what I'm asking here is how to <strong><em>override</em></strong> a particular key in an interface. For example, say I have a simple interface <code>A</code>:</p>
  
  <pre><code>interface A {
      foo: string;
      bar: number;
  }
  </code></pre>
  
  <p>And I have another simple interface <code>B</code>, also with a <code>bar</code> key, but of a different type:</p>
  
  <pre><code>interface B {
      bar: string;
      baz: number;
  }
  </code></pre>
  
  <p>Essentially, I want to merge these interfaces into one, giving me the following interface:</p>
  
  <pre><code>interface C {
      foo: string; // from A.foo
      bar: string; // from B.bar (overrides A.bar)
      baz: number; // from B.baz
  }
  </code></pre>
  
  <p>I wish I could just extend somehow:</p>
  
  <pre><code>interface C extends A, B {}
  </code></pre>
  
  <p>But I can't, because I get this error, which is totally expected and by design:</p>
  
  <blockquote>
    <p>Interface 'C' cannot simultaneously extend types 'A' and 'B'. Named
    property 'bar' of types 'A' and 'B' are not identical.</p>
  </blockquote>
  
  <p>I'm just not sure if there's another mechanism of which I am unaware. I don't think intersection or union types help here either.</p>