javascript - React Typescript typomvandlingsproblem - Parsningsfel: Saknad semikolon

Jag har denna enkla kodrad:

const target = e.target as HTMLLIElement;

och jag får detta felmeddelande:

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

Jag har tittat på dussintals olika inlägg som liknar mitt problem, men inget av dem stämmer riktigt överens med mitt problem eller så har de lösningar som inte riktigt gäller mitt projekt. Till exempel har vissa stött på eslint-problem, men jag har inte eslint-paketet installerat. Här är min package.json-fil:

{
  "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"
    ]
  }
}

Och här är min tsconfig.json-fil:

{
  "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"
  ]
}

Jag har också försökt använda vinkelparentesmetoden men det fungerar inte eftersom jag är i en tsx-fil. Jag har försökt sätta noImplicitAny till false. Jag har försökt lägga till semikolon till alla uttryck i samma fil som detta fel.

Några tankar om hur man ska lösa detta problem?

Svar #1

Borde vara felet från eslint.

Att lägga till eslintConfig i package.json kan lösa ditt problem. Inställningen nedan är standard eslintConfig från create-react-app

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

Svar #2

Sätt bara "parser": "@typescript-eslint/parser", i din eslint-konfigurationsfil så borde det fungera.

Relaterade artiklar