Как правильно импортировать React JSX из отдельного файла в Typescript 1.6

у меня есть следующие приложения.tsx-файл работает нормально, загружая элемент приложения из React.Компонент и дочерний элемент рабочего списка из другого React.Component (оба класса определены в одном приложении.файл ЦХ). Это работает в Visual Studio с установленным Typescript 1.6 (версия ECMAScript: ECMAScript 5, компиляция JSX: React, модульная система: CommonJS).

однако я хотел бы разделить эти два компонента на отдельные файлы. Однако, когда я раскомментирую импорт WorkList и удалите определение класса для компонента WorkList из приложения.ЦХ - он терпит неудачу с ошибкой:

ошибка TS2604 JSX тип элемента "рабочий список" не имеет какой-либо конструкции или подписи звонков.

вот рабочее приложение.tsx и желаемый рабочий список.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" />

Как правильно импортировать дочерний JSX с Typescript 1.6?

вот рабочий код с правильным ответом применяется:

// 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>
    }
}