如何为 vue 插件添加类型?

Posted

技术标签:

【中文标题】如何为 vue 插件添加类型?【英文标题】:how to add types for vue plugin? 【发布时间】:2019-08-14 03:32:22 【问题描述】:

我尝试使用类型脚本为 vue 添加 self 插件。

但是当我使用 vue 原型中的方法时,我的方法 $auth 在 myComponent 类型上不存在。我还为插件添加了.d.ts,但我认为他有点不正确,而且我认为在插件中不需要使用安装,还是需要?只是在一些示例中我没有看到安装,但在文档中说 - 需要使用安装。

我的插件

import _Vue from 'vue';
import store from '@/store'
import * as firebase from 'firebase';

export default 
    install: (Vue: typeof _Vue, options?: any) => 
        const base = firebase.initializeApp(config);
        const auth = firebase.auth();
        Vue.prototype.$auth = 
            login: async (username: string, pass: string) => 
                return await auth.signInWithEmailAndPassword(username, pass)
            ,
            logout: async () => 
                await auth.signOut()
            
        ;
        auth.onAuthStateChanged((user: any) => 
            store.commit('updateUser', user )
        )
    

myPlugin.d.ts

declare module 'vue/types/vue' 
    interface Vue 
        $auth: 
            login: (username: string, pass: string) => Promise<any>
        ;
    

组件

export default class SignUp extends Vue 
    email: string = '';
    password: string = '';

    async onSubmit()
        if ((this.$refs.form as any).validate()) 
            const auth = await this.$auth.login(this.email, this.password)
        
    



【问题讨论】:

【参考方案1】:

    install函数是一个严格的要求,这个函数是Vue内部在Vue.use(YourAwesomePlugin)中用来加载你的插件的。

    我无法使 声明文件 像您提到的那样正常工作,但在文档示例中,作者将声明合并到具有逻辑的文件中(而不是单独的 d.ts )。因此,如果您将 myPlugin.d.ts 的内容放入主插件文件 - 它会加载您的界面并且 $auth 将存在于 this 上。

TS 文档(参见模块增强部分): Declaration Merging


更新

要使.d.ts 文件正常工作,您只需在该文件中导入 vue。

Vue 文档: Augmenting Types for Use with Plugins

【讨论】:

以上是关于如何为 vue 插件添加类型?的主要内容,如果未能解决你的问题,请参考以下文章

如何为带有插槽的 vuejs 配置 facebook 插件

如何为 Vue.js 组件创建自定义样式属性

Cordova:如何为所有平台定义插件?

如何为Apache JMeter开发插件

如何为 jenkins git 插件指定 ssh 密钥

Vue.js 插件