typescript - hvordan legge til typer for vue-plugin?

Jeg prøver å legge til et eget plugin for Vue med TypeScript.

Men i det øyeblikket jeg bruker metoden min fra Vue-prototypen, eksisterer ikke metoden min $auth på typen myComponent. Jeg har også lagt til .d.ts for plugin, men jeg tror den er litt feil, og jeg tror også at i plugin trenger man ikke bruke install, eller trenger man? Bare i noen eksempler ser jeg ikke install, men i dokumentasjonen står det - man må bruke install.

min plugin

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>
        };
    }
}

komponent

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


}

Svar #1

  1. Funksjonen install er et strengt krav, denne funksjonen brukes av Vue internt i Vue.use(YourAwesomePlugin) for å laste pluginen din.

  2. Jeg kunne ikke få declaration file til å fungere så bra som du nevnte, men i dokumentasjonseksempler la en forfatter deklarasjonssammenslåing i en fil med logikk (ikke i en separat d.ts). Så hvis du legger inn innholdet i myPlugin.d.ts i hovedplugin-filen din - vil den laste grensesnittet ditt og $auth vil eksistere på this.

TS-dokumenter (se Modulforsterkning-seksjonen): Deklarasjonssammenslåing

OPPDATER

For å få .d.ts-filen til å fungere, trenger du bare å importere Vue i den filen.

Vue-dokumentasjon: Utvidelse av typer for bruk med plugins

Relaterte artikler