Typescript+Vue, is defined in the attribute value of Vue.prototype, and an error will be reported on the instance TS.

problem description

I am the first time to use Vue+typescript to organize a project, and now I encounter a problem, that is, I mount the encapsulated axios to Vue.prototype, and there is no problem in using it, but TS will make an error?

related codes

/ / Please paste the code text below (do not replace the code with pictures)

import api from "./http/api/index";  //api
Vue.prototype.$api = api;


export default class BusinessUser extends Vue {
  //http
    search(): void {
    this.$api.user.getMsg("UK1810000001")
    console.log(this);
  }

TS error will be reported here
Property"$api" does not exist on type "BusinessUser".

I would like to ask the god how to solve this problem.
but you can still send the request normally and get the requested data

.

declare module 'vue/types/vue' {
  interface Vue {
    $axios: AxiosInstance
    $dict: Dict
    $utils: object
  }
}

the answer on the first floor is feasible. Create a new .d.ts file and put it in the src/ directory. If you still report something wrong, just turn off ied, and restart ide. I use vscode

declare module 'vue/types/vue' {
  interface Vue {
    $axios: AxiosInstance
    $dict: Dict
    $utils: object
  }
}

ide/typescript.html-sharp%E5%A2%9E%E5%BC%BA%E7%B1%BB%E5%9E%8B%E4%BB%A5%E9%85%8D%E5%90%88%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


https://blog.csdn.net/qq_2474.
there is an item in this table. There are some examples. I have said that I can

.

item: https://github.com/wowill/vue.


I really can't add / / @ ts-ignore . I've tried the previous "useful" method, but restarting vscode still won't work. If anyone has a better way, please let me know.


Thank you for the answer from layer 2L.
although it has been a long time, by the way, it saves some people the same detours. Two key points:

    Create a new * .d.ts file under the
  • src directory. (if you write it in shims-vue, it will cause an error in main.ts.)
  • restart IDE (vscode). If you do not restart, there are occasional problems that do not take effect

the answer to the landlord is as follows:

import VueRouter, { Route } from 'vue-router'
// 
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
    $api: any;
  }
}
Menu