title: Typescript property does not exist on extended type
body: <p>I have a react component which either takes the <code>to</code> (react-router-dom prop) or <code>href</code> prop depending on where I want to redirect the user; whether it's within the app or to an external url. Typescript complains about my type with</p>
  <blockquote>
  <p>Property 'to' does not exist on type 'LinkType'.</p>
  </blockquote>
  <blockquote>
  <p>Property 'href' does not exist on type 'LinkType'.</p>
  </blockquote>
  <p>This is how I defined my type</p>
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  
  interface LinkBase {
    label: string;
    icon?: JSX.Element;
  }
  
  interface RouterLink extends LinkBase {
    to: string;
  }
  
  interface HrefLink extends LinkBase {
    href: string;
  }
  
  type LinkType = RouterLink | HrefLink;
  
  export function NavLink(props: LinkType) {
    const { to, label, icon, href } = props;  // TS complains about those to and href
  
    return(
      {to ? (
        &lt;Link to={to}&gt;{label}&lt;/Link&gt;
      ) : (
        &lt;a href={href}&gt;{label}&lt;/a&gt;
      )}
    );
  }
  </code></pre>