title: React Subcomponents in Typescript
body: <p>We have some complex compositions of components, and I'm having trouble making them typesafe. Based on the code below, I'd have expected Typescript to be able to provide types for <code>Menu.Item</code> or <code>Menu.Link</code>, but it doesn't for some reason, they're inferred as "any" (which is refined to <code>JSX.Element&lt;any&gt;</code> when you wrap it in JSX. Any idea why this is happening?</p>
  
  <pre><code>import * as React from 'react';
  
  type RootFunctionComponent&lt;OwnProps, SubComponents&gt; = React.FunctionComponent&lt;OwnProps&gt; &amp; SubComponents;
  
  interface ItemProps {
      text: string;
  };
  
  interface LinkProps {
      href: string;
  }
  
  const Item: React.FunctionComponent&lt;ItemProps&gt; = props =&gt; &lt;div {...props} /&gt;;
  const Link: React.FunctionComponent&lt;LinkProps&gt; = props =&gt; &lt;div {...props} /&gt;;
  
  interface MenuSubComponents {
      Item: React.FunctionComponent&lt;;
      Link: typeof Link;
  }
  
  const Menu: React.FunctionComponent&lt;{}, MenuSubComponents&gt; &amp; MenuSubComponents = props =&gt; &lt;div {...props} /&gt;
  
  Menu.Item = Item;
  Menu.Link = Link;
  
  
  const Test: React.FunctionComponent&lt;{}&gt; = () =&gt; {
      return &lt;&gt;
          &lt;Menu&gt;
              &lt;Menu.Item text={false} /&gt;
              &lt;Menu.Link /&gt;
          &lt;/Menu&gt;
      &lt;/&gt;
  }
  
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/EJA0i.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EJA0i.png" alt="the resulting any type"></a></p>