Eu tenho o seguinte arquivo app.tsx funcionando bem carregando um elemento App de um React.Component e um elemento filho Worklist de outro React.Component (ambas as classes definidas no mesmo arquivo app.tsx). Isso está sendo executado no Visual Studio com o Typescript 1.6 instalado (versão do ECMAScript: ECMAScript 5, compilação JSX: React, sistema de módulos: CommonJS).

No entanto, eu gostaria de dividir esses dois componentes em arquivos separados. No entanto, quando descomente a importação do WorkList e remova a definição de classe para o componente WorkList do app.tsx - ela falha com um erro:

O erro TS2604 tipo de elemento JSX 'WorkList' não possui nenhuma construção ou assinatura de chamada.

Aqui está o app.tsx de trabalho e o worklist.tsx desejado.

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

Qual é a maneira correta de importar um JSX filho com o Typecript 1.6?

Aqui está o código de trabalho com a resposta correta aplicada:

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