Vuefire: Can't use computed properties with TypeScript because of "Property '{prop_name}' does not exist on type 'Vue'." error

[wujekbogdan]

Consider the following code snippet:

import { Component, Vue } from "vue-property-decorator";
import { db } from "../../modules/firebase-client/";
import { DocumentReference } from "firebase/firestore";

@Component({
  name: "SingleEntry",
  firestore() {
    return {
      entry: db.collection("dashboard-entries").doc(this.$route.params.id),
      queue: db.collection("tasks-queue").where("entryRef", "==", this.entryRef)
    };
  },
  validations
})
export default class SingleEntry extends Vue {
  get entryRef(): DocumentReference {
    return db.collection("dashboard-entries").doc(this.$route.params.id);
  }
}

the queue property uses a computed value that's returned by the entryRef computed property. The code works (I can see proper results of the query rendered on the template), but TypeScript compiler is complaining that:

ERROR in /Users/wujekbogdan/htdocs/sw-rss-dashboard/src/views/SingleEntry/SingleEntry.vue
210:72 Property 'entryRef' does not exist on type 'Vue'.
    208 |     return {
    209 |       entry: db.collection("dashboard-entries").doc(this.$route.params.id),
  > 210 |       queue: db.collection("tasks-queue").where("entryRef", "==", this.entryRef)
        |                                                                        ^
    211 |     };
    212 |   },
    213 |   validations

Am I doing something wrong or is it a problem caused by incomplete/buggy typings declarations?

[posva]

I really don't know, the type declaration file is here: https://github.com/vuejs/vuefire/blob/lerna/packages/vuefire/types/vue.d.ts#L33 and we did add the this

[ishpartko]

I really don't know, the type declaration file is here: https://github.com/vuejs/vuefire/blob/lerna/packages/vuefire/types/vue.d.ts#L33 and we did add the this

• @posva maybe we need to add this link or make a tip in README file of this version? It should be helpful for many other typescript's guys I think

If it wasn't for your answer, I'd be looking for typings for this wrapper for a long time

[posva]

But it should be automatic if it's added in the right field in the package json file, shouldn't it?

[ishpartko]

@posva When I googled something like "vuefire" I found the repo without types vuefire 1.4.5 it's installing like npm install vuefire but if i'd like to get types supporting in typescipt I have to get another version from here vuefire v. 2 alpha as npm i vuefire@next (it's working for me now).

Did I understand the best way to implement it now? In this case, we could mark it in readme file of stable version as a tip for typescript developers. Or alpha is very unstable now? Sorry for my bad English.

[kaorun343]

Hi.

You need to write like this, for example

@Component<SingleEntry>({
  firestore() {
    this
  }
})
export default class SingleEntry extends Vue {}

[posva]

Closing as it seems to be resolved