Блог

Я создал очень простой плагин на typescript для проекта Vue:

 import Vue from 'vue'

export const AuthPlugin = {
  install (Vue: any, options: any) {
    Vue.login = () => {
      console.log('login(): '   options.domain)
    }

    Vue.logout = () => {
      console.log('logout(): '   options.domain)
    }

    Vue.getUserInfo = () => {
      console.log('getUserInfo(): '   options.domain)
    }
  }
}
  

Это any в Vue меня беспокоит, но пока я не вижу способа обойти это. Я вставляю плагин в main.ts:

 Vue.use(AuthPlugin, {
  domain: domain,
  clientId: clientID
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  

и использовать глобальные методы в компоненте:

   private login (): void {
    Vue.login()
  }
  

но это генерирует ошибку компилятора — он работает нормально, как и ожидалось, но отправляет консоль в спам:

 106:9 Property 'logout' does not exist on type 'VueConstructor<Vue>'.
    104 |   private logout (): void {
    105 |     // Vue.prototype.$auth.logout()
  > 106 |     Vue.logout()
        |         ^
    107 |   }
  

Я что-то упускаю? Как мне добавить ссылку на конструктор Vue? Обратите внимание, что если в install() методе я настрою функции как методы экземпляра, я могу ссылаться на них как на Vue.prototype.$login() просто отлично, без ошибок компилятора.

1. Vue как любой

Вы должны иметь возможность импортировать в Vue и использовать его в качестве типа в функции установки:

 import _Vue from "vue"; 
install(Vue: _Vue, ...
  

2. Объявление типа

Создав файл объявления для вашего плагина (например, auth.d.ts), вы можете добавить свои дополнения в VueConstructor.

 declare module 'vue/types/vue' {
  interface Vue {
    login: () => void;
    logout: () => void;
    getUserInfo: () => void;
  }
}
  

Источник:
https://www.mistergoodcat.com/post/vuejs-plugins-with-typescript