TypeScript declaration is wrong

[Dirk Nilius]

Problem

The VueGates declaration is defined like this:

declare class VueGates {
  install: (app: any, options?: VueGatesOptions) => void
}

This won't work and gives a compile error:

No overload matches this call.
  Overload 1 of 2, '(plugin: PluginObject<unknown> | PluginFunction<unknown>, options?: unknown): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof VueGates' is not assignable to parameter of type 'PluginObject<unknown> | PluginFunction<unknown>'.
      Property 'install' is missing in type 'typeof VueGates' but required in type 'PluginObject<unknown>'.
  Overload 2 of 2, '(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof VueGates' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
      Property 'install' is missing in type 'typeof VueGates' but required in type 'PluginObject<any>'.

Reason

The class is used as typeOf parameter when register the plugin like this:

import Vue from 'vue'
import { Plugin } from '@nuxt/types'
import VueGates from 'vue-gates'

Vue.use(VueGates) // <-- Compile error

const gatesPlugin: Plugin = (_context, inject) => {
  inject('gates', Vue.prototype.$gates)
}

export default gatesPlugin

Fix

The install method declared must be static:

declare class VueGates {
  static install: (app: any, options?: VueGatesOptions) => void
}

This is how other Vue plugins with TypeScript support declare the types.

I would also suggest to use a proper parameter type for app like this:

import Vue as _Vue from 'vue'

declare class VueGates {
  static install: (app: _Vue, options?: VueGatesOptions) => void
}

[Dirk Nilius]

@williamcruzme BTW: I would be able to submit a PR if that helps.

[John Cruz]

Hey @dirknilius, thank you for the help!

I was reviewing your solution. I don't use app: _Vue because it would no longer be compatible with Vue 3, so I use app: any

Are you sure that using "static" would still work correctly with Vue 2 and Vue 3? 🤔