Vue3 + ts 项目总结

最近在写vue3 + ts项目中遇到一个非常坑的问题，就是在 app.config.globalProperties 中挂在自定义属性时，使用时，会有一下 提示

    app.config.globalProperties.$axios = axios;  //配置axios的全局引用

在页面中使用如下

    const { proxy, appContext  } = getCurrentInstance()
    ...
    proxy.$axios({
        ...
    })

结果一直提示了下图的问题

说 $axios 属性没有在 ComponentPublicInstance中声明，在 @vue/runtime-core 中查看该 interface 的声明，其中继承了 ComponentCustomProperties

而 globalProperties的类型声明是ComponentCustomProperties & Record<string, any>

在查看下ComponentCustomProperties的定义处，说的意思就是自定义属性定义在这里

然后按照给出的实例在src 下 vite-env.d.ts中定义了，结果是不报错了，但是导致vue的引用全都出问题了

网上都是中国程序员给出各种五花八门的方案，最终解决方案新建个文件把声明移进去，我这里是在src下创建一个 shims-vue.d.ts 文件

重点： 不要声明 declare module '@vue/runtime-core', 而是 声明 vue。

declare module 'vue' {
  import { AxiosInstance } from "axios";
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
  }
}

export {}

至此，该坑也踩完了，希望能帮到好心人。