我正在使用typescript对我的javascript代码进行类型检查，这些代码具有docstring类型注解。
在我开始使用React之前，它一直工作得很好。
当我将组件编写为类时没有问题：

export default class MyComponent extends React.Component {...}

但是我希望使用函数组件的代码更干净：

export default function MyComponent(props) {...}

使用函数组件时，每个React组件都会出现两种错误（TS2607和TS2786）。

src/apps/status/App.js:37:21 - error TS2607: JSX element class does not support attributes because it does not have a 'props' property.

37                     <ServerTable
                       ~~~~~~~~~~~~
38                         srvData={srvData}
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
39                     />

src/apps/status/App.js:37:22 - error TS2786: 'ServerTable' cannot be used as a JSX component.
  Its instance type 'ServerTable' is not a valid JSX element.
    Type 'ServerTable' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

37                     <ServerTable
                        ~~~~~~~~~~~

服务器表.js：

import PropTypes from "prop-types";
import React from "react";

import LocationRow from "@apps/status/LocationRow.js";

/** @typedef {import('@types').ServerTablePropTypes} ServerTablePropTypes */

/**
 *
 * @param {ServerTablePropTypes} props
 * @returns {JSX.Element}
 * @constructor
 */
export default function ServerTable(props) {
    return <table className="server">
        <tbody>
        {Object.entries(props.srvData.locations).sort().map(
            ([locName, locData], _i) =>
                <LocationRow
                    key={locName}
                    locName={locName}
                    locDescription={locData.description}
                />
        )}
        </tbody>
    </table>;
}

ServerTable.propTypes = {
    srvData: PropTypes.object.isRequired,
};

类型.ts：

...

export type ServerTablePropTypes = {
    srvData: {locations: object},
};

我用于类型检查的命令：npx tsc --build jsconfig.json
jsconfig.json文件：

{
  "compilerOptions": {
    "jsx": "react",
    "module": "es2020",
    "moduleResolution": "node",
    "checkJs": true,
    "noEmit": true,
    "lib": ["es2020", "dom", "esnext", "dom.iterable"],
    "target": "es2017",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@common/*": ["src/common/*"],
      "@sass/*": ["src/sass/*"],
      "@apps/*": ["src/apps/*"],
      "@frame_player/*": ["src/components/frame_player/*"],
      "@types": ["src/types"]
    }
  },
  "include": [
    "src/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules/**"
  ],
  "typeAcquisition": {
    "include": ["jest"]
  }
}

软件包.json：

{
  "name": "myproject",
  "description": "description of my project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
      ...
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
    "@babel/plugin-transform-regenerator": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.18.6",
    "@babel/runtime": "^7.16.0",
    "@types/events": "^3.0.0",
    "@types/jest": "^27.0.2",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@types/regenerator-runtime": "^0.13.1",
    "babel-jest": "^27.3.1",
    "babel-loader": "^8.2.3",
    "babel-preset-env": "^1.7.0",
    "chai": "^4.2.0",
    "chai-dom": "^1.8.2",
    "cheerio": "^1.0.0-rc.3",
    "css-loader": "^5.2.4",
    "doctests": "^1.0.1",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^25.2.4",
    "eslint-plugin-jsdoc": "^36.1.0",
    "eslint-plugin-react": "^7.30.1",
    "esm": "^3.2.25",
    "file-loader": "^6.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.3.1",
    "jest-puppeteer": "^6.0.0",
    "jsdom": "16.4.0",
    "mock-browser": "^0.92.14",
    "postcss-loader": "^5.2.0",
    "puppeteer": "^11.0.0",
    "puppeteer-select": "^1.0.3",
    "regenerator-runtime": "^0.13.9",
    "sass": "^1.45.1",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "typescript": "^4.2.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "json5": "^2.2.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

有谁能帮助我，怎样才能摆脱这些错误呢？

更新日期：

• 应用程序.jsx*：

import React, {useEffect, useState} from "react";

import {getAjaxJSON} from "@common/ajax";
import InfoBox from "@apps/status/InfoBox";
import ServerTable from "@apps/status/ServerTable";
import {statusClass} from "@apps/status/common";

/**
 *
 * @returns {JSX.Element}
 * @constructor
 */
export default function App() {
    const [status, setStatus] = useState(null);
    useEffect(() => {
        getAjaxJSON("/api/status", {})
            .then(result => setStatus(result))
            .catch(error => console.error("error loading status: ", error));
    }, []);

    return status === null
        ? <img src="/static/images/loading_circle.svg" alt="Loading..."/>
        : <div id="servers">
            {Object.entries(status).sort().map(([srvName, srvData], _i) =>
                <div
                    key={srvName}
                    className={"server " + statusClass(srvData.status)}
                >
                    <h3>{srvName}</h3>
                    <InfoBox
                        description={srvData.description}
                        details={srvData.details}
                    />
                    <ServerTable
                        srvData={srvData}
                    />
                </div>
            )}
        </div>;
}