reactjs - tsx を js ファイルにコンパイルできません。どうすればいいですか？

Question

私は2つのファイルを持っています

app.tsx:

// Remember to rename the file from app.ts to app.tsx
// and to keep it in the src/ directory.

import * as React from "react";
import * as ReactDOM from "react-dom";
import Hello from "./Hello";

ReactDOM.render(
  <Hello name="Willson" />,
  document.getElementById("root")
);

Hello.tsx

import * as React from "react";

interface HelloProps {
  name: string;
}

class Hello extends React.Component<HelloProps, {}> {
  render() {
    return <div>Hello  {this.props.name}</div>;
  }
}

export default Hello;

両方のファイルが同じフォルダーにあります。

私は tsconfig.js を次のように書きました

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "outDir": "./built/",
        "jsx": "react",
        "lib": [
            "dom",
            "es2017"
        ],
        "sourceMap": true,
        "noImplicitAny": false
    },
    "files": [
        "src/app.tsx"
    ]
}

ノードjsでtscを実行しようとすると、エラーが発生します

src/Hello.tsx(9,30): error TS2339: Property 'props' does not exist on type 'Hello'.

私の目的は、webpack を介して app.tsx と hello.jsx からコンパイルされた js ファイルをバンドルすることです。

私は初心者なので、助けてください。前もって感謝します