增强类型以与 Vue 3 的插件一起使用

Question

起初：我知道有一个类似的问题（）但是它被错误地关闭了。

对于 Vue 2，文档中有一个将插件与打字稿一起使用的条目：Augmenting Types for Use with Plugins，但对于 Vue 3 则没有。

总而言之，我想要实现的目标是：我想在组件 defineComponent() 中将我的插件用作 this.$my-plugin()，但是当我执行以下操作时出现错误 Property '$my-plugin' does not exist on type 'ComponentPublicInstance[...] Vue 2 的指南。所以我假设必须更改 .d.ts 文件的语法。我的当前文件：

import { Vue } from 'vue';

import MyPlugin from './my-plugin';

declare module 'vue/types/vue' {
    interface Vue {
        $my-plugin: MyPlugin
    }
}

Answer 1

在main.ts中添加ComponentCustomProperties到'@vue/runtime-core'模块中：

import { createApp } from 'vue'
import App from './App.vue'
import MyPlugin from './my-plugin';
...

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties  {
     $myPlugin: MyPlugin //don't use kebab-case as key in js
     }
   }
let app=createApp(App)
app.config.globalProperties.$myPlugin= MyPlugin ;

app.mount('#app')

增强类型以与 Vue 3 的插件一起使用

Augmenting Types for Use with Plugins for Vue 3

typescript

vue.js

vuejs3