启动React服务时遇@types/babel__traverse类型错误求助

启动React开发服务时触发如下TypeScript语法错误，已尝试清理缓存、降级react-scripts和typescript，问题未解决：

312 |         // too complex for TS. So we type it as a general visitor only if the key contains `|`
    313 |         // this is good enough for non-visitor traverse options e.g. `noScope`
  > 314 |         [k: `${string}|${string}`]: VisitNode<S, Node>;
        |             ^
    315 |     };
    316 | 
    317 | export type VisitNode<S, P extends Node> = VisitNodeFunction<S, P> | VisitNodeObject<S, P>;

当前项目的package.json内容：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "12.7.8",
    "@types/react": "16.9.4",
    "@types/react-dom": "16.9.1",
    "axios": "^0.19.0",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.1.2",
    "typescript": "3.6.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

问题原因 #

报错行的[k: ${string}|${string}]是模板字符串类型索引签名，这个特性是TypeScript 4.4版本才引入的，而当前使用的TypeScript 3.6.3完全不支持该语法，这是报错的核心原因。

解决步骤 #

1. 卸载当前旧版本的依赖：

npm uninstall typescript react-scripts

2. 安装兼容的稳定版本（react-scripts与typescript版本需匹配，以下为经过验证的兼容组合）：

npm install react-scripts@5.0.1 typescript@4.9.5

3. 重新启动开发服务：

npm start

说明：react-scripts 5.x版本对TypeScript 4.x支持良好，同时能兼容项目中现有的React 16.x依赖。

内容的提问来源于stack exchange，提问作者Gilbert Intabo