javascript - 使用 as 进行转换时,React 中的 Tsx 编译错误
问题描述
每当在 .tsx 文件中使用“as”进行强制转换时,就会出现以下错误。
编译失败。
src\services\featureService.tsx 第 10:28 行:解析错误:意外的令牌,预期的“;”
this.features = {} as Feature[];
......................^
这是 package.json
{
"name": "x",
"version": "0.1.0",
"private": true,
"dependencies": {
"@azure/msal-browser": "^2.10.0",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@loadable/component": "^5.14.1",
"@microsoft/signalr": "^5.0.2",
"@testing-library/jest-dom": "^5.11.9",
"@types/loadable__component": "^5.13.3",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"dompurify": "^2.2.6",
"guid-typescript": "^1.0.9",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-data-table-component": "^6.11.6",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"styled-components": "^5.2.1",
"typescript": "^4.1.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"eslint": "node ./node_modules/eslint/bin/eslint.js -c .eslintcr.json . --ext .tsx"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/dompurify": "^2.2.1",
"@types/react-router-dom": "^5.1.7"
}
}
这是 tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
还有一个名为 .eslintcr.json 的文件
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"JSX": "true"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
4
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
],
"no-trailing-spaces": [
"error"
],
"no-multi-spaces": [
"error",
{ "ignoreEOLComments": true }
]
},
"parser": "babel-eslint"
}
解决方案
推荐阅读
- python - How to apply some features into a deep learning model?
- projection - How can I set extent when .prj files are identical?
- r - 通过变量迭代计算预测模型结果
- r - 不能从 R 中压缩目录而不包括完整的文件路径
- asp.net - Azure AD 中的 jwt-bearer 代表授权问题
- html - 使用类更改ul li中的字体颜色
- ansible - Make ansible ignore variable in template when checking changed state
- javascript - Javascript - 按钮的 rowIndex 在表格中不起作用
- kotlin - 有没有办法在 Kotlin 单例对象上隐藏实例变量
- user-interface - JavaFX 聊天窗口,如 Facebook 聊天