TypeScript type definition to export named React component from JavaScript library path
<p>Grommet is a React UI library with no TypeScript types. I am trying to make a basic definition file allowing each component to be imported as a named import React component type. Reason: convenience so an editor can find them by name to auto import, e.g.</p>

<pre><code>import { Button, AddIcon } from 'grommet'
</code></pre>

<p>I've tried various options. So far the closest I have is the following, which is wrong, but perhaps can be corrected:</p>

<pre><code>/// &lt;reference types="react" /&gt;
import * as React from 'react';

declare module 'grommet' {
  // I don't think this actually does anything, but I would like to grab just this
  import * as Button from 'grommet/components/Button';

  // this works, but when I use the debugger, I think it comes from the root index.js file
  export class Button extends React.Component&lt;any, any&gt; {}

  // somehow export AddIcon would be nice
}

declare module 'grommet/components/icons/base' {
  // I want to grab this Add component which is default
  import * as AddIcon from 'grommet/components/icons/base/Add';

  // somehow turn it into a React component type and export it as name AddIcon
  export class AddIcon extends React.Component&lt;any, any&gt; {}
}
</code></pre>

<p>What I think happens now is the 'grommet' module picks up the root <a href="https://github.com/grommet/grommet/blob/6983f712c48aa014bf5ae0e1ad26ecef926d7474/src/js/index.js" rel="nofollow">index.js</a> file and imports all the components. Button is working correctly, but I am not sure if it is possible to just import Button and not everything as a form of tree shaking via TypeScript definitions.</p>

<p>Two issues I would like to solve:</p>

<ol>
<li><p>How to import Add as a named import React component typed <code>{ AddIcon }</code> from <code>'grommet'</code>, or just <code>'grommet/components/icons/base'</code> if that is not possible.</p></li>
<li><p>Be able to import the individual components from their path instead of bringing in all of grommet. Preferably via <code>'grommet'</code> as a nice to have optimization, or e.g. <code>'grommet/components/Button'</code>.</p></li>
</ol>