javascript - "Kunde inte kompilera" "Parseringsfel: Ov väntad token :" under försök att migrera till typescript i befintlig create-react-app

Jag har en befintlig create-react-app som jag försöker migrera från JavaScript till TypeScript. Jag följde migrationsguiden på create-react-app.dev och installerade följande: npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Jag kopierade och klistrade sedan in koden från Material-UIs exempel på detta codesandbox-exempel, in i ResponsiveDrawer.tsx. När jag startar min server får jag:

Failed to compile.

./src/components/ResponsiveDrawer.tsx
src/components/ResponsiveDrawer.tsx
  Line 21:36:  Parsing error: Unexpected token :

Den identifierade raden är:

const useStyles = makeStyles((theme: Theme) =>

Jag har lekt med min eslint-konfiguration och laddat ner olika plugins. Min package.json innehåller:

    "@babel/preset-typescript": "^7.9.0",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.24.0",
    "@typescript-eslint/parser": "^4.24.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-react": "^7.23.2",
    "typescript": "^3.9.9"

Jag hade initialt lintningsfel markerade i .tsx-filen, men det verkar ha lösts genom att lägga till ovanstående. Jag har fortfarande problem med att kompilera appen. Vet någon hur man löser det?

Svar #1

Jag är inte säker på exakt vad jag gjorde, men jag fick det att fungera. Jag tittade på några YouTube-videor och tutorials. Jag skulle rekommendera denna om någon annan sitter fast på samma sätt.

Jag gjorde ändringar i följande:

package.json

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    "plugins": [
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-optional-chaining"
    ]
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.9.0",
    "@types/material-ui": "^0.21.8",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.24.0",
    "@typescript-eslint/parser": "^4.24.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-react": "^7.23.2",
    "typescript": "^3.9.9"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",     
    "module": "commonjs",             
    "jsx": "react", 
    "strict": true,      
    "noImplicitAny": false,
    "esModuleInterop": true,
    "skipLibCheck": true,    
    "forceConsistentCasingInFileNames": true 
  }
}

.eslintrc.json

{
    "root":true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["react", "@typescript-eslint", "eslint-plugin-node"],
    "files": ["**/*.ts", "**/*.tsx"],
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
...
}