运行旧React项目时reactstrap等模块声明文件缺失报错如何解决

1 排查类型包不兼容问题 #

直接安装最新版@types包无效，大概率是类型包版本和旧项目里的实际库版本不匹配，按以下步骤操作：

• 打开项目根目录的package.json，确认react-animation-components、reactstrap的已安装版本号
• 安装和主库大版本一致的类型包，示例：如果reactstrap当前是v8版本，执行npm i --save-dev @types/reactstrap@8
• 执行完成后删除项目下的node_modules文件夹、package-lock.json或yarn.lock文件，重新执行npm install装全依赖
• 重启IDE的TS服务（VSCode可按快捷键Ctrl+Shift+P，选择「TypeScript: Restart TS Server」）验证报错是否消失

2 正确配置自定义声明文件 #

如果对应版本的库确实没有官方维护的类型包，按以下操作写自定义声明，90%的手动声明无效都是路径或配置没写对：

• 项目根目录新建typings文件夹
• 在该文件夹下新建index.d.ts文件，写入以下内容：

declare module 'react-animation-components' {
  const content: any;
  export default content;
}

declare module 'reactstrap' {
  const content: any;
  export default content;
}

• 打开项目的tsconfig.json，确认include配置项包含了刚才新建的typings文件夹，示例配置：

{
  "compilerOptions": {
    // 原有配置保持不变
  },
  "include": ["src/**/*", "typings/**/*"]
}

• 重启TS服务验证

3 临时规避方案 #

如果只是要临时跑起来旧项目不需要完善类型，可以用以下方法快速跳过报错：

• 单个import语句报错的，在语句上方加一行注释// @ts-ignore即可跳过当前行的类型检查
• 全局关闭隐式any报错的，在tsconfig.json的compilerOptions里添加配置"noImplicitAny": false即可

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