Home / Questions / 239050
Accepted
gbianchi
Asked: 2020-02-20 06:04:59 +0800 CST 2020-02-20 06:04:59 +0800 CST

How to make typescript recognize a vue prototype

  • 772

To simplify the use of axios in my application, I used a prototype to declare it globally.

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URI,
  withCredentials: true
});

Vue.prototype.$http = instance;

So far there is no problem, the problem arises when using it in any component

import vue from 'vue'; <- agregado solo para ver si solucionaba el problema
import { Component, Vue, Watch} from 'vue-property-decorator';
.....
this.$http.get('url')
.then(Response => )

This code rightly indicates for typescript:

"Property '$http' does not exist on type 'YourComponent'."

So, how do you get typescript to recognize that and not go around protesting that you don't know what it is?

typescript

1 Answers

  1. Best Answer

    In the official documentation you have how to do it : You take the declaration of the class and increase it :

    import Vue from 'vue'

// Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $myProperty: string
  }
}

    So you should be able to do something like

    import {AxiosStatic} from 'axios';
import Vue from 'vue';

declare module 'vue/types/vue' {
  export interface Vue   {
    $http: AxiosStatic;
  }
}

    ###Explanation:

    In Typescript it is equivalent to make this declaration

    interface X {
  a: string;
  b: number;
}

    What is another:

    interface X {
  a: string;
}

//... más código

interface X {
  b: number;
}
    • 5