Свойство Vue.prototype.$не работает с машинописным текстом (Vue 2) с помощью пользовательского плагина

#typescript #vue.js #plugins #vuejs2

Вопрос:

Контекст

Я пишу пользовательский плагин для веб-SDK OneSignal, и я не могу заставить VSCode отслеживать объявления типов плагинов/завершение кода и т. Д… Я хочу, чтобы плагин был доступен глобально из всех компонентов приложения через пользовательский экземпляр $ property или глобальное свойство (попробовал оба). VSCode не реагирует на мое расширение интерфейса Vue. Документация Vue очень голая, и все, что я пытаюсь, не работает.

Код

Плагин

У меня есть плагин VueOneSignal , определенный так:

src/плагины/plugin.ts:

 const VueOneSignal = {
  install(Vue: any) {
    Vue.prototype.$VueOneSignal = OneSignal as IOneSignal;
  }
}

export default VueOneSignal;
 

OneSignal Объект-это то, что я хочу предоставить приложению во всех компонентах, и он будет содержать все функции, которые я хочу в плагине, и определен выше в том же файле. Я хочу, чтобы функции можно было вызывать с помощью чего-то вроде this.$VueOneSignal.init(<string>) . Здесь у нас есть только 1 функция init :

 const OneSignal: IOneSignal = {
  init(appId: string) {
    // do something
  }
}
 

и интерфейс над этим:

 interface IOneSignal {
  init: (appId: string) => void;
}
 

плагин.d.ts

У меня есть файл типизации в src/plugins/plugin.d.ts:

 interface IOneSignal {
  init: (appId: string) => void;
}

declare module 'vue/types/vue' {
  export interface Vue {
    $VueOneSignal: IOneSignal;
  }
}
 

вот что я прочитал, это правильный способ увеличить Vue, чтобы обнаружить свойство из приложения и его компонентов.

Использование плагина

В моем основном файле.ts я использую его как так:

 import VueOneSignal from '@/plugins/plugin';

Vue.config.productionTip = false;
Vue.use(VueOneSignal);

 

Invocation

Finally, when I go into the src/components/HelloWorld.vue and attempt to call the function, it works (as in the code runs) but I get a CLI error and don’t get the TS benefits like code completion, type-checking etc… If I hover over this.$VueOneSignal , it is marked as any type.

VSCode screenshot

I wish the documentation for using Vue Vue plugins Typescript was better. Does anyone know what I can do to fix this?