[英]Javascript: Ensuring an argument yields a valid HTML element (type-checking)
[英]TypeScript errors while using it for type-checking JavaScript code containing React components
我正在使用 typescript 對具有文檔字符串類型注釋的 javascript 代碼進行類型檢查。
在我開始使用 React 之前它運行良好。
當我將組件編寫為類時沒有問題:
export default class MyComponent extends React.Component {...}
Howerver 我想要使用 function 組件的更簡潔的代碼:
export default function MyComponent(props) {...}
使用 function 組件時,每個反應組件( 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
~~~~~~~~~~~
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"]
}
}
package.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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.