使用TypeScript+React+Webpack执行yarn start时编译失败求助

看起来你遇到的是几个典型的旧版TypeScript+React生态的版本兼容问题，我帮你拆解下具体解决方案：

1. 修复@types重复声明错误（TS2403） #

这个错误的核心是嵌套依赖的@types版本冲突：你项目根目录安装的@types/react@15.0.39，和@types/react-router内部依赖的@types/react版本不一致，导致TypeScript解析时出现重复变量声明。

解决步骤：

• 在package.json中添加resolutions字段（yarn专属特性，强制统一所有依赖的@types/react版本）：

  "resolutions": {
    "@types/react": "15.0.39"
  }
  

• 删除node_modules文件夹和yarn.lock文件，重新执行yarn install，确保所有依赖链中的@types/react都使用你指定的版本。

2. 解决JSX元素类型不兼容错误（TS2605） #

这个问题来自react-router-redux@5.0.0-alpha.6的类型定义和你当前的React、React Router版本不匹配——alpha版本的类型稳定性较差。

有两个方案可选：

方案一：降级到稳定兼容版本 #

修改package.json中的依赖，切换到更适配的版本：

"dependencies": {
  // ...其他依赖
  "react-router-redux": "4.0.8"
},
"devDependencies": {
  // ...其他依赖
  "@types/react-router-redux": "5.0.0"
}

重新执行yarn install即可。

方案二：临时跳过库类型检查（权宜之计） #

如果不想降级依赖，可以在tsconfig.json的compilerOptions中添加：

"skipLibCheck": true

这个配置会让TypeScript跳过对第三方库类型文件的检查，快速绕过当前错误，但不建议长期使用，可能隐藏其他类型问题。

3. 修复paths配置后的模块找不到问题（TS2307） #

你原来的paths配置让TypeScript优先去node_modules找模块，但你的项目内部模块（比如containers/Listing/reducer）在src目录下，所以需要调整配置顺序，让TypeScript先搜索本地源码：

修改tsconfig.json的paths配置：

"compilerOptions": {
  // ...其他配置
  "paths": {
    "*": ["*", "node_modules/*", "node_modules/@types/*"]
  }
}

结合你设置的baseUrl: "./src"，这个配置会让TypeScript先在src目录下查找模块，找不到再去node_modules搜索。

另外，建议扩展include字段，确保所有源码文件都被编译：

"include": [
  "./src/**/*"
]

你原来只包含了index.tsx和global.d.ts，容易漏掉其他模块文件。

长期优化建议 #

你的依赖版本都比较老旧，存在不少已知的兼容问题，建议逐步升级：

• 先把TypeScript升级到2.9.x或更高版本（旧版本的类型解析逻辑有较多bug）
• 替换awesome-typescript-loader为ts-loader（目前ts-loader维护更活跃，对新版本webpack支持更好）
• 逐步升级React、React Router等核心依赖到稳定版本，从根源减少兼容问题

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