VSCode(Vetur) 无法识别组件中的自定义 Vue 属性

Question

I've mounted a plugin on Vue in a main.ts file, declared its type in a plugin.d.ts file, then used it in a component.vue file. The compilation works fine, but VSCode intellisense still tells me this property does not exist. Am I missing anything? Here are the codes.

//plugin.ts
import Vue as _Vue from 'vue'
export class Plugin { 
  someFunc() { //do something } 
}
const plugin = new Plugin()
export default function myPlugin(Vue: typeof _Vue) {
  Vue.prototye.$plugin = plugin
}

and for declaration,

//plugin.d.ts
import { Plugin } from './plugin'
declare module 'vue/types/vue' {
  interface Vue {
    $plugin: Plugin
  }
}

then I mount it in an entry point,

//main.ts
import Vue from 'vue'
import plugin from './plugin'

Vue.use(plugin)

finally, I want to use the plugin in a component,

//component.vue
import { Component, Vue } from 'vue-proprety-decorator'
@Component
export default class MyComponnent extends Vue {
  func() {
    this.$plugin.someFunc()
  }
}

The compilation shows no problem, but intellisense tells me "Property '$plugin' does not exist on type 'MyComponent'." and autocompletion does not work.

Did I do anything wrong?

Answer 1

Try to change the name of the type definition from plugin.d.ts to types.d.ts. That did the trick for me.