You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React+TypeScript项目中使用pdf.js加载PDF时安装@types/pdfjs-dist后仍报类型声明错误的求助

React+TypeScript项目中使用pdf.js加载PDF时安装@types/pdfjs-dist后仍报类型声明错误的求助

你好,遇到这种安装了类型声明包但还是报错的情况,通常是版本不兼容或者TypeScript模块解析的问题,我整理了几个可行的解决思路,你可以逐一尝试:


1. 确认pdfjs-dist@types/pdfjs-dist版本匹配

TypeScript类型声明包和核心库的版本差异过大是最常见的原因。你当前使用的是pdfjs-dist@3.9.179,需要确保安装的@types/pdfjs-dist也是3.x版本的:

运行这个命令安装对应大版本的类型包:

npm i --save-dev @types/pdfjs-dist@3.x

如果类型包没有完全匹配的小版本,大版本一致通常也能正常工作。


2. 检查tsconfig.json的模块解析配置

TypeScript可能没有正确识别到@types目录下的声明文件,你可以检查tsconfig.json的以下配置:

  • 确保compilerOptions.moduleResolution设置为node(这是Node.js项目的默认值,但如果被修改过会有影响)
  • 确认include数组包含了项目源码目录(比如src/**/*),确保TypeScript能扫描到类型声明文件

示例tsconfig.json相关配置:

{
  "compilerOptions": {
    "moduleResolution": "node",
    // 其他配置...
  },
  "include": [
    "src/**/*"
  ]
}

3. 手动添加自定义类型声明文件

如果上面的方法都没用,你可以手动创建一个类型声明文件来覆盖这个模块的类型:
在项目的src目录下新建一个custom.d.ts文件(名字可以随便取,只要是.d.ts后缀就行),内容如下:

declare module 'pdfjs-dist/build/pdf';
declare module 'pdfjs-dist/build/pdf.worker.min.js';

然后确保这个文件被tsconfig.jsoninclude字段包含,这样TypeScript就会把这个模块识别为已知类型,不再报“any类型”的错误。


4. 调整导入方式

有时候动态导入的路径写法可能影响类型识别,你可以试试换一种静态导入的方式:

import * as pdfJS from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';

const initPdf = async () => {
  pdfJS.GlobalWorkerOptions.workerSrc = window.location.origin + '/pdf.worker.min.js';
  // 后续逻辑不变...
}

这种方式可能更容易让TypeScript识别到类型声明。

如果还是不行,你可以检查一下node_modules/@types/pdfjs-dist目录是否存在,确认安装过程没有报错,有时候网络问题可能导致类型包安装不完整,这时候可以删除node_modulespnpm-lock.yaml,重新安装依赖。

备注:内容来源于stack exchange,提问作者Dolphin

火山引擎 最新活动