reactjs - 我无法将 tsx 编译成 js 文件。我该怎么做？

Question

我有两个文件

应用程序.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")
);

你好.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 文件。

请帮助我，因为我是初学者。提前致谢