title: How to mix Union and Intersection types Flow annotations?
body: <p>I keep running into this scenario where I have trouble typing some resources from an API. Here is a small repro of the typical situation.</p>
  <p>I have a <code>DescribableResource</code> that can be either of type <code>ResourceA</code> or <code>ResourceB</code>. Each of these 2 types have a common base and some specific props, as follow:</p>
  <pre class="lang-js prettyprint-override"><code>type Base = {
    version: string,
    name: string,
    year: number
  };
  
  type ResourceA = Base &amp; {
    mySpecificA: string
  };
  
  type ResourceB = Base &amp; {
    mySpecificB: string
  };
  
  type DescribableResource = ResourceA | ResourceB;
  </code></pre>
  <p>Now, I have a component in charge of receiving a <code>DescribableResource</code> and displaying its content on screen.</p>
  <pre><code>type Props = {
    +resource: DescribableResource
  };
  
  function ResourceDescriptor({ resource }: Props) {
    const { version, name, year, mySpecificA, mySpecificB } = resource;
  
    return (
      &lt;div&gt;
        &lt;div&gt;{version}&lt;/div&gt;
        &lt;div&gt;{name}&lt;/div&gt;
        &lt;div&gt;{year}&lt;/div&gt;
        {mySpecificA &amp;&amp; &lt;div&gt;{mySpecificA}&lt;/div&gt;}
        {mySpecificB &amp;&amp; &lt;div&gt;{mySpecificB}&lt;/div&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>The code works fine, but I get the following Flow errors:</p>
  <pre><code>Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/ResourceDescriptor.js:25:32
  
  All branches are incompatible:
   • Either property mySpecificA is missing in Base [1].
   • Or property mySpecificA is missing in object type [2].
  
   [1][2] 14│ type ResourceB = Base &amp; {
          15│   mySpecificB: string
          16│ };
            :
          22│ };
          23│
          24│ function ResourceDescriptor({ resource }: Props) {
          25│   const { version, name, year, mySpecificA, mySpecificB } = resource;
          26│
          27│   return (
          28│     &lt;div&gt;
  
  
  Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/ResourceDescriptor.js:25:45
  
  All branches are incompatible:
   • Either property mySpecificB is missing in Base [1].
   • Or property mySpecificB is missing in object type [2].
  
   [1][2] 10│ type ResourceA = Base &amp; {
          11│   mySpecificA: string
          12│ };
            :
          22│ };
          23│
          24│ function ResourceDescriptor({ resource }: Props) {
          25│   const { version, name, year, mySpecificA, mySpecificB } = resource;
          26│
          27│   return (
          28│     &lt;div&gt;
  </code></pre>
  <p><a href="https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoSmATzCTgCEUBnegXjgG9y44A3JFGbAIAOwBccZjCjBRAcwA0POKJQgkk6bIXLe1VFEmiAriABGg8gF8K5GnURJmEE1DRIAgnA5NWcADIuFRBqAGU6NGBMYDRPLRk5eRs7B3pkFzcPBh9GFnog7l5QiKQomLQGBJ1k2ypaegARZzRZcxRzABskDNd3didM-u8AH0G+7Lt7BrgABRwwZlyiuABqIiGPSWbmVuB2rp7nCaQUykwTUQwRUXGspB29sBhoAApOOA2TuGtJeYhFgBKYK8NBiaRcfiCYRiRSqdRIOEGFBQOElSLRWKeNHhDEVHLWXJfe52XhEGBuW6vFS8AA8ABNgHwAHw03hwBlM5mcARCG7WWkAekZLLZdJF3LUGgFwq5Yo5Es4yKgMol8s46LKmLigSCnJZGtxWoqnlVXOs6s15ViOQCesVVu1DDNLIt7I5stFvEBFGsQA" rel="nofollow noreferrer">Demo of these errors on Try Flow</a></p>
  <p>I can't tell whether I'm doing something wrong in my type definitions or if it's a Flow bug. Help would be very welcome.</p>