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

以 react-router-dom 模块为例

1. npm加上 @types/

根据报错提示尝试安装该库的TypeScript版本 (该库的 ts 声明文件),也就是在该库的名称前加上 @types/

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

//本例中
npm install @types/react-router-dom

在方法一可行的情况下,推荐使用方法一但是,不是所有的第三方库都有 TypeScript 的版本,所以方法一不能保证百分百有效,如果方法一不奏效,那么我们来看一下方法二。

2. 添加配置文件

新建文件夹src/@types/,在 src 目录新建@types目录,在其中编写.d.ts声明文件,声明文件会自动被识别,可以在此为一些没有声明文件的模块编写自己的声明文件。
本例子为 react-router-dom.d.ts
声明模块类型

declare module 'XXX' {
  const content: any
  export = content
}

//本例中
declare module 'react-router-dom' {
  const content: any
  export = content
}

实际上在 tsconfig include 字段包含的范围内编写 .d.ts,都将被自动识别。在x.js相同目录创建同名声明文件x.d.ts,这样也会被自动识别;typings 声明管理器,了解不多,已经不推荐使用。(楼主使用无效,想要尝试可看TypeScript 引入第三方包,报无法找到模块错误

--
引用:
TypeScript 中的声明文件

posted @ 2020-07-16 16:47  Shaw_喆宇  阅读(6361)  评论(0编辑  收藏  举报