如何为vue插件添加类型?

时间:2019-03-23 07:26:38

标签: typescript vue.js vuejs2

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

但是当我使用vue原型中的方法时,我的方法<!-- mpdfPage.php --> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <h2>HTML Table</h2> <form name="table" method="post" action=""> <table> <tr> <th>User Name</th> <th>Password</th> </tr> <tr> <td><?php echo $user?></td> <td><?php echo $pass?></td> </tr> </table> </form> </body> </html> <?php $html = file_get_contents(__FILE__); ?> 在myComponent类型上不存在。我还为插件添加了.d.ts,但我认为他有点不正确,而且我认为在插件中不需要使用install还是需要?仅在某些示例中,我看不到安装,但在文档中说-需要使用安装。

我的插件

$auth

myPlugin.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 })
        })
    }
}

组件

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

1 个答案:

答案 0 :(得分:1)

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

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

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


更新

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

Vue文档: Augmenting Types for Use with Plugins