React Typescript 類型轉換問題 - 解析錯誤：缺少分號

Question

我有這行簡單的代碼：

const target = e.target as HTMLLIElement;

我收到了這個錯誤：

  Line 18:28:  Parsing error: Missing semicolon
> 18 |     const target = e.target as HTMLLIElement;
     |                            ^

我查看了許多與我的問題相似的不同帖子，但沒有一個與我的問題完全匹配，或者他們的解決方案與我的項目並不真正相關。 例如，有些遇到了 eslint 問題，但我沒有安裝 eslint package。 這是我的package.json文件：

{
  "name": "ally-autobot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@reduxjs/toolkit": "^1.5.1",
    "@tailwindcss/postcss7-compat": "^2.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/lodash": "^4.14.168",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router-dom": "^5.1.7",
    "autoprefixer": "^9",
    "firebase": "^8.4.2",
    "firebase-tools": "^9.10.0",
    "lint": "^0.7.0",
    "lodash-core": "^4.17.19",
    "postcss": "^7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux-persist": "^6.0.0",
    "source-map-loader": "^2.0.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "typescript": "~4.1.5"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

這是我的tsconfig.json文件：

{
  "compilerOptions": {
    "sourceMap": true,
    "incremental": true,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

我也嘗試過使用尖括號方法，但這不起作用，因為我在 tsx 文件中。 我嘗試將 noImplicitAny 設置為 false。 我嘗試將分號添加到與此錯誤相同的文件中的所有表達式中。

關於如何解決這個問題的任何想法？

Answer 1

應該是 eslint 的錯誤。

將 eslintConfig 添加到package.json可能會解決您的問題。 以下設置是 create-react-app 中的默認 eslintConfig

"dependencies": {
...
},
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
},

Answer 2

只需將"parser": "@typescript-eslint/parser",放在您的 eslint 配置文件中，這應該可以工作。