TypeScript 引入第三方包，报无法找到模块错误

解决 TypeScript 引入第三方包，报无法找到模块“XXX”的声明文件错误

解决办法：

以 react-router-dom 模块为例
image.png
image.png

解决办法有两种

方法一

根据报错提示尝试安装该库的TypeScript版本 （该库的 ts 声明文件），也就是在该库的名称前加上 @types/
本例子为 npm install -D @types/react-router-dom
其它库如下：

npm install -D @types/XXX
or
yarn add -D @types/XXX

但是，不是所有的第三方库都有 TypeScript 的版本，所以方法一不能保证百分百有效，如果方法一不奏效，那么我们来看一下方法二。

方法二

自己定义类型

在方法一可行的情况下，推荐使用方法一

1、在项目根目录新建 typings 文件夹。【typings 可以换成其它名字，比如 types】

2、在 tsconfig.json 里的 include 添加上 typings
image.png
image.png

3、在 typings 文件夹里新建类型声明文件，格式为 XXX.d.ts 本例子为 react-router-dom.d.ts
image.png
image.png

4、声明模块类型， 在 typings 文件夹下的 XXX.d.ts 文件

declare module 'XXX' {
  const content: any
  // 这里的 content 可以根据自己的需要，添加需要的类型，这的话可以让 ts 更好的提示
  /**
  type content = {
    test: string
  }
 */
  export = content
}

本例子为：

declare module 'react-router-dom' {
  const content: any
  export = content
}

效果如下
image.png
image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容