title: Typescript optionally extending interface
body: <p>I have two <code>interfaces</code>, one of which extends the other. However, I would like to be able to extend the first <code>interface</code> and make all of its types optional. I don't want to have to rewrite all of the definitions of the first <code>interface</code> to be optional in my second <code>interface</code> (because what's the advantage of extending at that point?) or redefine the first <code>interface</code> because it is being used elsewhere.</p>
  <p>What it looks like:</p>
  <pre class="lang-js prettyprint-override"><code>interface First {
    type1: string
    type2: string
  }
  
  // Seemingly pointless rewrite (why would I even need to extend?)
  interface Second extends First {
    type1?: string
    type2?: string
    type3: string
    type4: string
  }
  
  // What I imagine the extending should be (but doesn't work)
  interface Second extends First? {
    type3: string
    type4: string
  }
  </code></pre>
  <p>I did my research and did find <a href="https://stackoverflow.com/questions/29650402/typescript-extend-an-interface-as-not-required">this question</a> that answers something very similar, but it's been a year since that question has been touched and I think my problem is not exactly the same because I want to make the <em>entire</em> extended <code>interface</code> optional, not just a few types from it.</p>
  <p>Is there any way to do this in Typescript, or do I just need to suck it up and make a long second <code>interface</code>?</p>
  <hr />
  <h2>Update (to explain why I'd like to have this work):</h2>
  <p>I am writing a React web app and have a component that displays an entity from my database in a way that allows the user to edit any value of that entity. I would like my React component to handle the case where the user is creating a new entity, as well as the case where the user is editing an existing entity.</p>
  <p>To keep with my above example, let's say that my database entity's values are replicated by the <strong>First</strong> <code>interface</code> and the React component uses two passed props that exist in the <strong>Second</strong> <code>interface</code>. The React component will <em>always</em> have the two values in the <strong>Second</strong>, but not necessarily have the values of the <strong>First</strong>.</p>
  <p>In the case of the user creating a new entity, I'd like to construct the React component with only the values of <strong>Second</strong>, without having to specify <code>null</code> values for everything in <strong>First</strong>. In the case of the user editing an existing entity, I would pass everything from <strong>First</strong> and <strong>Second</strong>.</p>
  <p>In both cases, it would be the same UI, but constructed with a different set of values.</p>