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';