如何在Vue Composition API-Typescript中处理注入属性的类型

Question

import firebase from 'firebase'
import Vue from 'vue'
/* This file simply imports the needed types from firebase and forwards them */
declare module 'vue/types/vue' {
interface Vue {
$fireStore: firebase.firestore.Firestore
$fireDb: firebase.database.Database
$fireFunc: firebase.functions.Functions
$fireStorage: firebase.storage.Storage
$fireAuth: firebase.auth.Auth
$fireMess: firebase.messaging.Messaging
}
}

在Vue 2的普通打字脚本项目中，我们可以做到这一点。但是当使用Composition API时，如何在函数setup(_, { root})的root中注入这样的属性？所以我不能和root.$fireStore一起使用。。。

现在，我必须将它与any类型(如(root as any).$fireStore(一起使用。所以希望任何人都能帮助我的团队。我们现在正在使用Nuxt Composition进行一个项目。

Answer 1

在vue 3中有点相同，但不是相同的模块

declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$fireStore: firebase.firestore.Firestore
$fireDb: firebase.database.Database
$fireFunc: firebase.functions.Functions
$fireStorage: firebase.storage.Storage
$fireAuth: firebase.auth.Auth
$fireMess: firebase.messaging.Messaging
}
}

Answer 2

创建一个可组合的firebase怎么样？

import firebase from 'firebase'
export default function useFirebase() {
return {
fireStore: firebase.firestore.Firestore
fireDb: firebase.database.Database
fireFunc: firebase.functions.Functions
fireStorage: firebase.storage.Storage
fireAuth: firebase.auth.Auth
fireMess: firebase.messaging.Messaging
};
};

然后在组件的setup()中使用：

export default defineComponent({
setup() {
const {fireStore, fireDb, fireFunc, fireStorage, fireAuth, fireMess} = useFirebase();
}
});

Answer 3

是的，几天后，我找到了这个问题的临时解决方案。只需像这样添加一个nuxt.d.ts或types文件夹。因此，您可以在Vue实例和中间件中使用$apolloHelpers。。。

import { SetupContext } from '@vue/composition-api'
/**
* @description Define type for $apolloHelpers --> copy from Apollo module --> inject Apollo Helpers
* @docs https://github.com/nuxt-community/apollo-module/blob/master/lib/templates/plugin.js#L141
*/
declare module '@nuxt/types' {
interface Context {
$apolloHelpers: {
onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
onLogout(apolloClient, skipResetStore = false)
getToken(tokenName?: string)
}
}
interface NuxtAppOptions {
$apolloHelpers: {
onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
onLogout(apolloClient, skipResetStore = false)
getToken(tokenName?: string)
}
}
}
declare module 'vue/types/vue' {
interface Vue {
$apolloHelpers: {
onLogin(token, apolloClient, cookieAttributes, skipResetStore = false)
onLogout(apolloClient, skipResetStore = false)
getToken(tokenName?: string)
}
}
}

Answer 4

我不知道它是否会对你有所帮助，但有根$商店$fireAuth

Answer 5

在tsconfig.json中插入@nuxt/types，类型将工作于