如何在Typescript 1.6中从单独的文件中正确导入React JSX

我有以下app.tsx文件正常工作从React.Component加载一个App元素和另一个React.Component的子Worklist元素（两个类在同一app.tsx文件中定义） . 这是在安装了Typescript 1.6的Visual Studio中运行的（ECMAScript版本：ECMAScript 5，JSX编译：React，模块系统：CommonJS） .

但是，我想将这两个组件拆分为单独的文件 . 但是，当我取消注释WorkList的导入并从app.tsx中删除WorkList组件的类定义时 - 它失败并显示错误：

错误TS2604 JSX元素类型'WorkList'没有任何构造或调用签名 .

这是工作的app.tsx和所需的worklist.tsx .

// 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<Props, {}> {
    constructor(props: Props) {
        super(props);
    }
    render() {
        return <h2>WorkList!{this.props.foo} </h2>
    }
}
class App extends React.Component<Props, {}> {
    constructor(props: Props) {
        super(props);
    }
    public render() {
        return <WorkList foo="baz"></WorkList>
    }
}


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<Props, {}> {
    constructor(props: Props) {
        super(props);
    }
    render() {
        return <h2>WorkList!{this.props.foo} </h2>
    }
}

<WorkList foo="bar" />

使用Typescript 1.6导入子JSX的正确方法是什么？

以下是应用了正确答案的工作代码：

// 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<Props, {}> {
    constructor(props: Props) {
        super(props);
    }
    public render() {
        return <WorkList foo="baz"></WorkList>
    }
}       
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<Props, {}> {
    constructor(props: Props) {
        super(props);
    }
    render() {
        return <h2>WorkList!{this.props.foo} </h2>
    }
}