title: How to properly import React JSX from separate file in Typescript 1.6
body: <p>I have the following app.tsx file working fine loading an App element from a React.Component and a child Worklist element from another React.Component (both classes defined in the same app.tsx file). This is running in Visual Studio with Typescript 1.6 installed (ECMAScript version: ECMAScript 5, JSX compilation: React, Module System: CommonJS).  </p>
  
  <p>However, I would like to split these two components into separate files. However, when I uncomment the import of WorkList and remove the class definition for the WorkList component from app.tsx - it fails with an error:  </p>
  
  <blockquote>
    <p>Error TS2604  JSX element type 'WorkList' does not have any construct
    or call signatures.</p>
  </blockquote>
  
  <p>Here is the working app.tsx and the desired worklist.tsx.</p>
  
  <pre><code>// app.tsx
  import * as React from "react";
  import * as ReactDOM  from "react-dom";
  //import * as WorkList from "./worklist";
  
  interface Props {
      foo: string;
  }
  
  class WorkList extends React.Component&lt;Props, {}&gt; {
      constructor(props: Props) {
          super(props);
      }
      render() {
          return &lt;h2&gt;WorkList!{this.props.foo} &lt;/h2&gt;
      }
  }
  class App extends React.Component&lt;Props, {}&gt; {
      constructor(props: Props) {
          super(props);
      }
      public render() {
          return &lt;WorkList foo="baz"&gt;&lt;/WorkList&gt;
      }
  }
  
  
  ReactDOM.render(    
      React.createElement(App, { foo: 'bar' }),
      document.getElementById('app')
  );
  
  
  
  
  //worklist.tsx
  import * as React from "react";
  
  interface Props {
      foo: string;
  }
  
  class WorkList extends React.Component&lt;Props, {}&gt; {
      constructor(props: Props) {
          super(props);
      }
      render() {
          return &lt;h2&gt;WorkList!{this.props.foo} &lt;/h2&gt;
      }
  }
  
  &lt;WorkList foo="bar" /&gt;
  </code></pre>
  
  <p>What is the proper way to import a child JSX with Typescript 1.6?  </p>
  
  <p>Here is the working code with the correct answer applied:</p>
  
  <pre><code>// app.tsx
  import * as React from "react";
  import * as ReactDOM  from "react-dom";
  import WorkList from "./worklist";
  
  interface Props {
      foo: string;
  }
  
  class App extends React.Component&lt;Props, {}&gt; {
      constructor(props: Props) {
          super(props);
      }
      public render() {
          return &lt;WorkList foo="baz"&gt;&lt;/WorkList&gt;
      }
  }       
  ReactDOM.render(
  
      React.createElement(App, { foo: 'bar' }),
      document.getElementById('app')
  );
  
  //worklist.tsx
  import * as React from "react";
  
  interface Props {
      foo: string;
  }
  
  export default class WorkList extends React.Component&lt;Props, {}&gt; {
      constructor(props: Props) {
          super(props);
      }
      render() {
          return &lt;h2&gt;WorkList!{this.props.foo} &lt;/h2&gt;
      }
  }
  </code></pre>