全栈之巅 nestjs 实战视频关于 axio 实例模块补充的解决方案

缘起

最近学了全栈之巅关于 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
  }
}

即可解决！！！