报错截图
- 比如下载并使用
nprogress包,报错截图如下
- 比如下载并使用
vue-baidu-calendar包,报错截图如下
报错场景
- 使用
npm下载了某些包 - 在
Vue3+ts项目中使用 - 引入进来后
TS校验报错 - 但是不影响使用
解决方案
- 在项目根目录的
env.d.ts文件中加上声明js模块兼容处理语句 - 要是没有就自己新建一个
- 什么
npm包ts校验有问题 - 就声明一下这个为模块
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)或者其他等等