How to handle types for injected properties in Vue Composition API - Typescript
What problem does this feature solve?
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
}
}
In a normal typescript project with Vue 2, we can do like above to access this.$fireStore
. But when use Composition API, how I can inject the properties like this in the root on function setup(_, { root})? So I cant use with root.$fireStore...
Now, I must use it with any type like (root as any).$fireStore. So hope anyone can help my team. We are working on a project with Nuxt Composition now.
What does the proposed API look like?
setup(_, { root}) {
root.$xyz
}
Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.
@posva is there an official guideline for this question though (if no, this should be a feature request)?
As Evan stated in your linked code review: "There's no way to make this work in TS though. If users insist on using this with TS they'd have to shim the types themselves."
See how it is done on vue-router-next: https://github.com/vuejs/vue-router-next/blob/master/src/globalExtensions.ts
It's worth checking vuejs/docs-next repository for open issues about documenting this and open a new one if there is none to discuss and propose things