title: Typescript type definition: TS2604: JSX element type 'something' does not have any construct or call signatures
body: <p>I have an abstract class in "File1":</p>
  
  <pre><code>// File1.tsx
  
  import * as React from 'react';
  
  export interface IProps {
    prop1: string;
    prop2: number;
  }
  
  export abstract class Something extends React.Component&lt;IProps&gt; {
    public typeName: string;
  }
  </code></pre>
  
  <p>then, in other file (File2) i define infinite classes extending from abstract class Something:</p>
  
  <pre><code>// File2.tsx
  
  import { Something } from './File1';
  
  export class Something1 extends Something {
    public typeName: string = 'Type1';
  
    public render() {
      return &lt;div&gt;Something 1&lt;/div&gt;
    }
  }
  
  export class Something2 extends Something {
    public typeName: string = 'Type2';
  
    public render() {
      return &lt;div&gt;Something 2&lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>Now, here is my problem:
  In a 3rd File, i import the classes defined before (Something1 or Something2) and then i passing this class to 2 different components: ReadProperty and RenderComponent. In the first component i need accessing to the property typeName of the class and do some stuff and in the second file i need render that class:</p>
  
  <pre><code>// File3.tsx
  
  import { Something } from './File1';
  import { Something1, Something2 } from './File2';
  
  interface IReadProperty {
    something: Something;
  };
  
  const ReadProperty: React.SFC&lt;IReadProperty&gt; = ({ something }) =&gt; {
    // here i can access to property typeName. No problem here.
  
    something.typeName // Type1 | Type2 | ... Infinite
  
    ...do some stuff
  }
  
  
  interface IRenderComponent {
    something: Something;
  }
  
  const RenderComponent: React.SFC&lt;IRenderComponent&gt; = ({ something }) =&gt; {
    // i need do some stuff here before render "something" component
    // here i get an error when i try render the component
    return &lt;something /&gt;;
  }
  
  
  const Main: React.SFC = () =&gt; {
    return (
      &lt;div&gt;
        &lt;ReadProperty something={Something1} /&gt;
        &lt;RenderComponent something={Something1} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>but when i try to render the component in RenderComponent, i get the follow error: TS2604: JSX element type 'something' does not have any construct or call signatures.</p>
  
  <p>What is wrong here? i defined type 'something' as abstract Class Something because i can define infinite Classes that extend from Something, so i can't define using: something: Something1 | Something2 | Something50 ...;</p>
  
  <p>here is an example that i trying to do: <a href="https://codesandbox.io/s/18yzvkx8jj" rel="nofollow noreferrer">https://codesandbox.io/s/18yzvkx8jj</a></p>