“编译失败”“解析错误：意外的令牌：”在尝试迁移到现有 create-react-app 中的打字稿期间答案

【问题标题】："Failed to Compile" "Parsing error: Unexpected token :" during attempt to migrate to typescript in existing create-react-app“编译失败”“解析错误：意外的令牌：”在尝试迁移到现有 create-react-app 中的打字稿期间
【发布时间】：2023-03-26 15:31:01
【问题描述】：

我有一个现有的 create-react-app，我正在尝试从 javascript 迁移到 typescript。我按照create-react-app.dev 上的迁移指南安装了以下内容： npm install --save typescript @types/node @types/react @types/react-dom @types/jest

然后，我将 Material-UI 示例中 codesandbox 示例中的代码复制并粘贴到 ResponsiveDrawer.tsx 中。当我启动我的服务器时，我得到：

Failed to compile.

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

标识的行是：

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

我玩过我的 eslint 配置并下载了各种插件。我的 package.json 包含：

    "@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"

我最初在 .tsx 文件中突出显示了 linting 错误，但这似乎已通过添加上述内容得到解决。我仍然在编译应用程序时遇到问题。有人知道怎么解决吗？

【问题讨论】：

标签： javascript reactjs typescript compiler-errors create-react-app

【解决方案1】：

我不确定我到底做了什么，但我做到了。我看了一些 youtube 视频和教程。 I'd recommend this one if anyone else is similarly stuck.

我对以下内容进行了更改：

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"],
...
}

【讨论】：