Vue: Provide a way to type an instance method when using typescript

[lucastheisen]

Version

2.3.3

Reproduction link

https://github.com/lucastheisen/vue-instance-method-fail

Steps to reproduce

• Use typescript
• Create a plugin that adds an instance method (https://vuejs.org/v2/guide/plugins.html, example 4):

export class AppVuePlugin {
    public static install(vue: typeof Vue, options: any) {
        Object.defineProperties(vue.prototype, {
            $api: {
                get() { return new AppApi() },
            },
        })
    }
}

• Install the plugin:

Vue.use(AppVuePlugin);

• Try to use it:

@Component({})
export default class AppComponent extends Vue {
    public data: AppData
    public created() {
        this.data = this.$api.getAppData(); // <- Property '$api' does not exist on type 'AppData'
    }

What is expected?

I expect the error but would like to see an official way to allow for this...

What is actually happening?

The ts build error:

ERROR in C:\Users\ltheisen\git\pastdev-vue-instance-method-fail\src\app.vue.ts
(33,22): error TS2339: Property '$api' does not exist on type 'App'.

---

Not sure the best approach for this, perhaps allowing some sort of generic on the Vue class? Or an official documented suggestion for working around this... Right now i create a subclass, but it feels wrong:

import Vue from 'vue'
export default class AppVue extends Vue {
    public $api: AppApi
}

And then use this _version_ of Vue everywhere else:

import Vue from './app-vue'

[ktsn]

You can just augment Vue's types. See: https://github.com/vuejs/vue/blob/dev/types/test/augmentation-test.ts

[gnumarcelo]

@lucastheisen This post can help you also:
https://stackoverflow.com/questions/43142304/how-to-augment-the-vue-class-and-keep-typescript-definition-in-sync/43232151#43232151

[eladcandroid]

@gnumarcelo This code worked for me only when I put it in the same plugin file..

Here is my axio-plugin.ts file:

import _Vue from 'vue';
import Axios from 'axios';

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
  // do stuff with options
  Vue.prototype.$http = Axios;
}

export class AxiosPluginOptions {
  // add stuff
}

import { AxiosStatic } from 'axios';

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

[erezBk]

@gnumarcelo This code worked for me only when I put it in the same plugin file..

Here is my axio-plugin.ts file:

import _Vue from 'vue';
import Axios from 'axios';

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
  // do stuff with options
  Vue.prototype.$http = Axios;
}

export class AxiosPluginOptions {
  // add stuff
}

import { AxiosStatic } from 'axios';

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

אח שלי סידרת אותי בומבה
(some thank you words in Hebrew)