title: Multiple exports with dot notation in Typescript
body: <h3>Ref. <a href="https://stackoverflow.com/questions/48996762/multiple-export-with-dot-notation">this question</a>.</h3>
  <p>I'm trying to do exactly the same, but with Typescript.</p>
  <h3>Problem</h3>
  <p>This line (just before the export statement):</p>
  <pre><code>Sidebar.Item = SidebarItem;
  </code></pre>
  <p>gives compile error: <code>Property 'Item' does not exist on type 'typeof Sidebar'</code></p>
  <h3>Attempted solution 1</h3>
  <p>I've tried adding Item to my Sidebar class definition, like so:</p>
  <pre><code>class Sidebar extends Component&lt;SidebarProps, SidebarState&gt; {
      Item: SidebarItem;
      ...
  }
  </code></pre>
  <p>But that results in this error: <code>Public property 'Item' of exported class has or is using private name 'SidebarItem'.</code></p>
  <h3>Attempted solution 2</h3>
  <p>I've tried removing this line:</p>
  <pre><code>Sidebar.Item = SidebarItem;
  </code></pre>
  <p>And instead of adding Item to my class definition, I'm exporting both classes like so:</p>
  <pre><code>export default Sidebar;
  export { SidebarItem as Item };
  </code></pre>
  <p>Which does compile, and I am able to import everything like so:</p>
  <pre><code>import * as Sidebar from '...';
  </code></pre>
  <p>But then I have to use them like so:</p>
  <pre><code>&lt;Sidebar.default&gt;
      &lt;Sidebar.Item&gt;&lt;/Sidebar.Item&gt;
      &lt;Sidebar.Item&gt;&lt;/Sidebar.Item&gt;
  &lt;/Sidebar.default&gt;
  </code></pre>
  <p>And I really want to get rid of that <code>.default</code> in <code>Sidebar</code>.</p>
  <p>What am I doing wrong here?</p>