title: Typescript arrays: using mixed types inference
body: <p>Typescript version 3.0.3.</p>
  
  <p>I'm creating a model for my sidebar navigation menu, item can be one of 2 types as described below:</p>
  
  <pre><code>type SidebarItems = Array&lt;SimpleSidebarItem | ComplexSidebarItem&gt;;
  
  abstract class SidebarItem {
      title: string;
  }
  
  class SimpleSidebarItem extends SidebarItem {
      url : string;
  }
  
  class ComplexSidebarItem extends SidebarItem {
      subItems: Array&lt;{
          title: string;
          url : string;
      }&gt;
  }
  </code></pre>
  
  <ul>
  <li>If it's a SimpleSidebarItem, it must have a url, but no subItems.</li>
  <li>It it's a ComplexSidebarItem, it shouldn't have url, but must have subItems.</li>
  </ul>
  
  <p>I can't get this working right -
  this shouldn't be a valid input, but it shows ok:</p>
  
  <pre><code>const items: SidebarItems = [{title: '', url: '', subItems: [{title: '', url: ''}]}];
  </code></pre>
  
  <p>Inference don't work as expected:</p>
  
  <pre><code>const items: SidebarItems = [{title: '', url: ''}, {title: '', subItems: [{title: '', url: ''}]}];
  const shouldBeComplexSidebarItem = items[1];
  </code></pre>
  
  <p>type of shouldBeComplexSidebarItem is SimpleSidebarItem | ComplexSidebarItem.</p>
  
  <p>What am I missing here?</p>