title: Typescript type issue in map function of mixed types react
body: <p>I have defined two types, <code>Team</code> and <code>Position</code>. They are both part of an array that I iterate over in my react component.</p>
  <p>based on the types defined below in my <code>map</code> function I am seeing the following error.</p>
  <p>Examples of errors I am seeing.</p>
  <blockquote>
  <p>Property 'name' does not exist on type 'Position'. [2339]</p>
  <p>Property 'position' does not exist on type 'Team'. [2339]</p>
  </blockquote>
  <p>Is it not possible to check that the array contains either type?</p>
  <p>My code looks like as follows:</p>
  <pre><code>type Team = {
     name: string; 
     city: string;
  } 
  
  type Position = {
     position: number;
  }
  
  const Component = () =&gt; {
      const teamsAndPosition = [
         {
          name: 'Arsenal', 
          city: 'London',
         },
        {
          name: 'Everton', 
          city: 'Liverpool',
         },
        { 
           position: 2
        }
      ];
  
      const [list, setList] = useState&lt;Array&lt;Team | Position &gt;&gt;(teams)
      
      list.map((item: Team | Position) =&gt; {
         return item.name ? (
           &lt;div&gt;
             // I am seeing an error for these below
             &lt;p&gt;{item.name}&lt;/p&gt;
             &lt;p&gt;{item.city}&lt;/p&gt;
           &lt;/div&gt;
         ) : (
           &lt;p&gt;{item.position}&lt;/p&gt;
         )
      })
  }    
  </code></pre>