Vue3+Vite+TS使用npm包校验报错问题:无法找到模块xxx的声明文件、xxx.js”隐式拥有any类型

815 阅读1分钟

报错截图

  • 比如下载并使用nprogress包,报错截图如下

111.png

  • 比如下载并使用vue-baidu-calendar包,报错截图如下

微信截图_20240701100549.png

报错场景

  • 使用npm下载了某些包
  • Vue3+ts项目中使用
  • 引入进来后TS校验报错
  • 但是不影响使用

解决方案

  • 在项目根目录的env.d.ts文件中加上声明js模块兼容处理语句
  • 要是没有就自己新建一个
  • 什么npmts校验有问题
  • 就声明一下这个为模块
  • declare module 'xxx'

如下图:

/// <reference types="vite/client" />

// 声明xxx为模块,解决ts校验问题
declare module 'nprogress'
declare module 'vue-baidu-calendar'
declare module 'xxx'

原理

  • env.d.ts文件中写 declare module 'xxx' 的意思是告诉TS编译器,
  • 遇到xxx结尾的模块导入时,将这些模块视为一个模块整体
  • 不当成文件,ts是去校验文件。
  • 就能够正确处理了,就不会出现编译时的类型错误问题,就更加灵活了
  • 因为有些老的包是没有用ts
  • 还是用js写的,(比如nprogress)或者其他等等