缘起
最近学了全栈之巅关于 nestjs 的培训视频”第一章:(nestjs)NodeJs+VueJs全栈开发《全栈之巅》视频网站+app+小程序“,有原理有实战,老师水平极高,深入浅出,受益匪浅。但降到 axios 实例的”模块补充“知识点的时候,问题解决并不彻底,实例中还是会出现个别文件告警的状况,当时有很多同学通过视频弹幕说不知怎么处理。经过查资料并多次尝试后,终于完美解决。
视频情景还原
视频链接:https://www.bilibili.com/video/BV18E41127N4?p=7 ,第8~12分钟的时间段,可以看到 main.ts 文件有告警。
问题解决
第一步:
在 shims-vue.d.ts 同级目录下,新建文件: my.d.ts (其实这个名字可以随便取,只要保持: .d.ts 后缀就可以。
将 shims-vue.d.ts 里的下面内容剪切复制到 my.d.ts 里
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
第二步:
在 shims-vue.d.ts 文件里加入下面的内容:
// 下面增加 $http 的类型定义,去掉 this.$http 的警告并便于编程时的代码提示,this.$http 是 axios 的示例 - AxiosInstance
import Vue from 'vue'
import {AxiosInstance}from 'axios'
declare module 'vue/types/vue'{
// 声明为 Vue 补充的东西
interface Vue {
$http: AxiosInstance
}
}
即可解决!!!