Cannot import React JSX from separate file while using Typescript

Question

The issue is similar to How to properly import React JSX from separate file in Typescript 1.6.

It works fine when all the code is in a single file. But when I put the component to a different file and try to import, typescript compiler gives error.

The code looks fine.

Error I get is

JSX element type 'Hello' does not have any construct or call signatures.

app.tsx

/// <reference path="typings/tsd.d.ts" />
import React = require('react');
import ReactDOM = require('react-dom');
import $ = require('jquery');
import Hello = require('./components/Hello');

$(()=>{
    ReactDOM.render(<Hello name="Tom" />,document.body);
});

components/Hello.tsx

/// <reference path="../typings/tsd.d.ts" />
import React = require('react');

export default class Hello extends React.Component<any,any>{
    render(){
        return <div className="hello">Hello {this.props.name} !</div>;
    }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "jsx": "react"
    }
}

Answer 1

If you wrote these lines

export default class Hello ...
/* and */    
import Hello = require('./components/Hello');

Then you need to write this to consume it:

<Hello.Hello name="Tom" />

You could instead write this, to change the module to export the class as its top-level object:

class Hello ...
export = Hello

or you could import the Hello export from the module with a destructuring:

import { Hello } from './components/Hello';

or you could import the default export from the module:

import Hello from './components/Hello';