VSCode throw error "Property does not exist on type" when referencing to another getter

[tech-goldenphoenix]

Reproduction

https://stackblitz.com/edit/vitejs-vite-ac81dz?file=src%2Fstore%2Findex.ts&terminal=dev

Steps to reproduce the bug

VSCode throw error "Property does not exist on type" when referencing another getter
The minimal code to reproduce is live in this stackblitz

getters: {
    subTotal: (state) => {
      return state.checkout?.subtotalPriceV2?.amount;
    },
    totalDiscount(state) {
     // This line throw the error on vscode: "Property 'subTotal' does not exist on type ..."
      return this.subTotal;
    },
  },

Expected behavior

this.subTotal should be correctly typed and auto suggested

Actual behavior

VSCode throws the error:

Property 'subTotal' does not exist on type '{ checkout: { id: string; webUrl: string; createdAt: string; email: string; subtotalPriceV2: { amount: number; currencyCode?: string | undefined; }; totalPriceV2: { amount: number; currencyCode?: string | undefined; }; totalTaxV2: { ...; }; lineItems: { ...; }[]; } | null | undefined; } & _StoreWithGetters<...> & Pi...'.ts(2339)throws

Additional information

Vue Language Features (Volar) v0.34.15
Typescript version 4.6.3
Takeover mode On
"pinia": "^2.0.14",
"vue": "^3.0.0"
"vue-tsc": "^0.29.8"

[posva]

You need to type the return:

 totalDiscount(): number | undefined {
      return this.subTotal;
    },

See https://pinia.vuejs.org/core-concepts/getters.html#getters

[tech-goldenphoenix]

@posva Thank you so much. It works. I think we should update the document in the Accessing other getters because when developers face this problem the normal behavior is checking this section first. I totally skipped the first section that you linked above

[zachbryant]

Of interesting note, forgetting this will cause vscode to complain about all of the store's getters, not just one

[ryancui92]

Actually, I had faced a related issue. Everything is OK after adding the return type of getters. But I want to know the exact reason...

Here's a minimal example

type Module = {}
const MODULES: Module[] = [{}]

export const useUserStore = defineStore('user', {
  state: () => {
    return {}
  },
  getters: {
    check() {
      return (module: Module) => true
    },
    modules() {
      // this.check would get a TS2554: Expected 0 arguments, but got 1.
      return MODULES.filter((module) => this.check(module))
    }
  }
}

When I declared the return type of modules, problem was solved. i don't know why...

export const useUserStore = defineStore('user', {
  state: () => {
    return {}
  },
  getters: {
    check() {
      return (module: Module) => true
    },
    // Add return type
    modules(): Module[] {
      return MODULES.filter((module) => this.check(module))
    }
  }
}

As the document pointed out:

This is due to a known limitation in TypeScript and doesn't affect getters defined with an arrow function nor getters not using this.

Are there any information about this known limitation in TypeScript?

[septatrix]

I too am quite curious. Is there an upstream discussion about this behaviour? It would be great if it could be resolved upstream or at least get some more information why this might not be possible in typescript.

[NaturalDevCR]

I'm experiencing this with webstorm, the weird part is that in a quasar project it doesn't happens, not sure what's going on, all getters have the corresponding type declaration, but still get this error.

[isimmons]

Also getting this no matter if I use arrow functions, regular functions, annotate return type or not. I've tried all.

What doesn't make sense to me is why would state contain the properties that are defined as part of getters and not state? I read somewhere that the state parameter is actually a reference to the store but that makes no sense to me and in this case, it is not. It is actually a reference to state

If I remove the annotation on state in the below code, then this is the inferred type that typescript is showing me.

(property) state?: (() => {
    items: never[];
}) | undefined

import { defineStore } from 'pinia';
import { groupBy } from 'lodash';
import type { Product } from './ProductStore';

export type Item = {
  product: Product;
};

export type CartStoreState = {
  items: Array<Item>;
};

export const useCartStore = defineStore('CartStore', {
  state: () => {
    return { items: [] as Array<Item> };
  },
  getters: {
    count: (state) => state.items.length,
    isEmpty(state): boolean {
      return state.count === 0;
    },
    grouped: (state) => groupBy(state.items, (item: Item) => item.product.name),
    groupCount:
      (state): ((name: string) => number) =>
      (name: string) =>
        state.grouped[name].length,
  },
  actions: {
    addItemsToCart(qty: number, product: Product) {
      for (let i = 0; i < qty; i++)
        this.items.push({ product: { ...product } });
    },
  },
});

[jumika]

No workaround works for us for this problem. TS: 5.3.3, vue-tsc: 1.8.27, vue: 3.4.21, pinia: 2.1.7.

[jumika]

Answer of @posva solved it for me. Actually it is in the documentation but intuition makes you think you have to type the getter that you call, not the getter that you use the other getter in. This assumption misled me. Those damn assumptions always...
So the rule is: always explicitly define return types of your getters.

[stefaanMLB]

Same here, none ot the presented work-arounds works pinia seems