title: Allow a stateless function to accept multiple different prop interfaces
body: <p>How do I allow a function to accept multiple different prop interfaces? In the example below I want it to accept either <code>IFlatProps</code> or <code>IChildrenProps</code>. I tried something like below but it doesn't seem to work:</p>
  
  <pre><code>const Field: React.SFC&lt;IFlatProps | IChildrenProps&gt; = ({
    label, name, helpText, children
  }) =&gt; (
    // ...
  );
  </code></pre>
  
  <p>The interfaces look like this:</p>
  
  <pre><code>interface IFlatProps {
    label: string;
    name: string;
    helpText?: string | JSX.Element;
  }
  
  interface IChildrenProps {
    children: React.ReactNode;
    helpText?: string | JSX.Element;
  }
  </code></pre>
  
  <p>edit: The error that I'm getting from typescript is:</p>
  
  <blockquote>
    <p>[ts] Type '(IFlatProps &amp; { children?: ReactNode; }) | (IChildrenProps
    &amp; { children?: ReactNode; })' has no property 'label' and no string
    index signature</p>
  </blockquote>
  
  <p>This error is for the <code>label</code> property, I also get the same error for the <code>name</code> property.</p>
  
  <p>Here's a codesandbox replicating the issue: <a href="https://codesandbox.io/s/k5o20kvo4o" rel="nofollow noreferrer">https://codesandbox.io/s/k5o20kvo4o</a></p>