VSCode Throw Error "Property Does Not Exist On Type" When ... - GitHub

Home » What State Does Not Exist » VSCode Throw Error "Property Does Not Exist On Type" When ... - GitHub

Maybe your like

Skip to content Dismiss alert {{ message }} / pinia Public

  • Uh oh!

    There was an error while loading. Please reload this page.

  • Notifications You must be signed in to change notification settings
  • Fork 1.2k
  • Star 14.5k
  • Code
  • Issues 19
  • Pull requests 14
  • Discussions
  • Actions
  • Projects
  • Security
  • Insights
Additional navigation options VSCode throw error "Property does not exist on type" when referencing to another getter #1299 Closed Answered by posva tech-goldenphoenix asked this question in Help and Questions VSCode throw error "Property does not exist on type" when referencing to another getter #1299 @tech-goldenphoenix tech-goldenphoenix May 16, 2022 · 6 comments · 5 replies Answered by posva Return to top Discussion options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

tech-goldenphoenix May 16, 2022

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"
3 You must be logged in to vote All reactions Answered by posva May 16, 2022

You need to type the return:

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

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

View full answer

Replies: 6 comments 5 replies

  • Oldest
  • Newest
  • Top
Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

posva May 16, 2022 Maintainer

You need to type the return:

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

See https://pinia.vuejs.org/core-concepts/getters.html#getters
Marked as answer 7 You must be logged in to vote ❤️ 1 All reactions
  • ❤️ 1
3 replies @tech-goldenphoenix Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

tech-goldenphoenix May 17, 2022 Author

@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
👍 1 All reactions
  • 👍 1
@zachbryant Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

zachbryant Sep 16, 2022

Of interesting note, forgetting this will cause vscode to complain about all of the store's getters, not just one
👍 4 All reactions
  • 👍 4
@Powersource Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

Powersource Apr 29, 2025

damn thanks zach, i thought it was time for me to give up
All reactions Answer selected by tech-goldenphoenix Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

ryancui92 Jun 6, 2022

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?
5 You must be logged in to vote All reactions 1 reply @septatrix Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

septatrix Aug 4, 2022

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.
👍 2 All reactions
  • 👍 2
Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

NaturalDevCR Sep 21, 2022

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.
4 You must be logged in to vote All reactions 0 replies Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

isimmons Oct 11, 2023

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 } }); }, }, });
3 You must be logged in to vote All reactions 0 replies Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

jumika Mar 4, 2024

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.
4 You must be logged in to vote 😕 2 All reactions
  • 😕 2
1 reply @jumika Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

jumika Jun 26, 2024

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.
All reactions Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

stefaanMLB Jun 24, 2024

Same here, none ot the presented work-arounds works pinia seems
5 You must be logged in to vote All reactions 0 replies Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Category ❓ Help and Questions Labels None yet 10 participants @tech-goldenphoenix @posva @jumika @Powersource @isimmons @ryancui92 @septatrix @zachbryant @NaturalDevCR @stefaanMLB Converted from issue

This discussion was converted from issue #1298 on May 16, 2022 12:19.

Heading Bold Italic Quote Code Link Numbered list Unordered list Task list Attach files Mention Reference Menu Select a reply Loading

Uh oh!

There was an error while loading. Please reload this page.

Create a new saved reply 👍 1 reacted with thumbs up emoji 👎 1 reacted with thumbs down emoji 😄 1 reacted with laugh emoji 🎉 1 reacted with hooray emoji 😕 1 reacted with confused emoji ❤️ 1 reacted with heart emoji 🚀 1 reacted with rocket emoji 👀 1 reacted with eyes emoji You can’t perform that action at this time.

Tag » What State Does Not Exist