<p dir="auto">I need to type both stateless component and classic component in single component property:</p>
<p dir="auto"><strong>TypeScript Version:</strong><br>
1.8.10/1.9.0-dev.20160518-1.0</p>
<p dir="auto"><strong>Code</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// A self-contained demonstration of the problem follows...
// Ideally:
interface ComponentProps {
   ButtonComponent: React.StatelessComponent&lt;any&gt; | React.ComponentClass&lt;any&gt;;
  ...
}

class MyComponent extends React.Component&lt;ComponentProps, {}&gt; {
  render() {
    const { ButtonComponent } = this.props;
    const someProps = {};
    const button = &lt;ButtonComponent {...someProps}/&gt;
    return (&lt;div&gt;{button}&lt;/div&gt;);
  }
}

// Ideal usage

&lt;MyComponent ButtonComponent={() =&gt; &lt;button&gt;test&lt;/button&gt;}/&gt;

class MyButtonComponent extends React.Component&lt;{},{}&gt; {
...
}

&lt;MyComponent ButtonComponent={MyButtonComponent} /&gt;"><pre class="notranslate"><span class="pl-c">// A self-contained demonstration of the problem follows...</span>
<span class="pl-c">// Ideally:</span>
<span class="pl-k">interface</span> <span class="pl-smi">ComponentProps</span> <span class="pl-kos">{</span>
   <span class="pl-c1">ButtonComponent</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">StatelessComponent</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span> <span class="pl-c1">|</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentClass</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
  ...
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">ComponentProps</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-c1">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> ButtonComponent <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">someProps</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">button</span> <span class="pl-c1">=</span> <span class="pl-kos">&lt;</span><span class="pl-smi">ButtonComponent</span><span class="pl-kos"></span> <span class="pl-kos">{</span>...<span class="pl-s1">someProps</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-s1"></span><span class="pl-c1">&gt;</span>
    <span class="pl-s1">return</span> <span class="pl-kos">(</span><span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-kos">{</span>button<span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span>div&gt;<span class="pl-kos">)</span>;
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Ideal usage</span>

<span class="pl-c1">&lt;</span><span class="pl-smi">MyComponent</span> <span class="pl-smi">ButtonComponent</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-smi">button</span><span class="pl-c1">&gt;</span><span class="pl-c1">test</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>button&gt;<span class="pl-kos">}</span><span class="pl-c1">/</span></span><span class="pl-c1">&gt;</span>

<span class="pl-k">class</span> <span class="pl-smi">MyButtonComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-c1">&lt;</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
...
<span class="pl-kos">}</span>

<span class="pl-kos">&lt;</span><span class="pl-smi">MyComponent</span><span class="pl-kos"></span> <span class="pl-smi">ButtonComponent</span><span class="pl-c1">=</span><span class="pl-kos">{</span>MyButtonComponent<span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto"><strong>Expected behavior:</strong><br>
Compiles successfully</p>
<p dir="auto"><strong>Actual behavior:</strong><br>
Throws error: "JSX Element type ButtonComponent doesn't have any construct or call signatures"<br>
It works If i change definition of ButtonComponent to just solo React.StatelessComponent or<br>
React.ComponentClass</p>
<p dir="auto">It would be nice to not do <code class="notranslate">///&lt;reference path="to/declaration.d.ts"/&gt;</code> on source files to be able to compile with dependencies. It becomes problematic when you move files around and you have to go through each file that has those reference paths. I'm suggesting a different way of including reference paths, something like:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="tsc src/somemodule.ts --reference typings/references.d.ts"><pre class="notranslate">tsc src/somemodule.ts --reference typings/references.d.ts</pre></div>
<p dir="auto">Instead of:</p>
<p dir="auto">somemodule.ts</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/// &lt;reference path=&quot;../typings/references.d.ts&quot;/&gt;

export function HelloWorld(): void {

}"><pre class="notranslate"><code class="notranslate">/// &lt;reference path="../typings/references.d.ts"/&gt;

export function HelloWorld(): void {

}
</code></pre></div>
<p dir="auto">I would only have this:</p>
<p dir="auto">somemodule.ts</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export function HelloWorld(): void {

}"><pre class="notranslate"><code class="notranslate">export function HelloWorld(): void {

}
</code></pre></div>