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

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

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

Ошибка 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" />

Как правильно импортировать дочерний 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>
    }
}