vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
https://pinia.vuejs.org
MIT License
12.72k stars 996 forks source link

Typescript issue with getter within getter #2684

Closed Glandos closed 1 month ago

Glandos commented 1 month ago

Reproduction

https://play.pinia.vuejs.org/#eNqNVE1v2zAM/SuCL3HRRG7QoQOCpMg69JAd1mHd0cDg2EyiVKYEfaQBAv/30ZLjpFlR9GaTj4+PT6IOyTet+c5DMkmmtjRCO2bBec1kgetZnjibJ/c5ilor49iBeQvPThlgDVsZVbMBz0rl0YHhzg5yzLFUaIkkgGY9Pr3KcZrFDsRHPw5qLQsH9MfYdOmdU8jmpRTlC/UN9Ryvr6n9AksDNSD1P0RijqxpplksIoJpdsaWDJMod1QXmm+tQhru0HbJuwTNNGEh0sa0QFG0kTzJwjcHW4+WRr1ammpL4OEROiensgp2TilpR4UWsWzjnLaTLCsrJHwFUuwMR3AZ6jr7r2Z+x+/4OJNimVGjTGAF+7dtqGJUQf0Z9iN0fsPHX/jXwLq77UjrlrUlbXJsyBZn6XBWYn1hSqlqLSSYJ+0EHd4bcwop1euPEHPGQy+x3ED58k58a/dR9S8DZN8OzsZyhVmDi+nH55+wp+8+WavKS0J/kPwNVknfaoywB48VyT7DBbWLcMYC13/s494B2uNQrdDgRsAHm79/MPpJ7i2/PXPxdN/Jwn4xKlgJvNiNcJtoKXqQgVWfpO5hX2AfknFt+vWanROmg67nYMjSKza7jyJjCRKWeNMb2rBTtKgqqCiTLgsLE4a+XoIJpWkrw3rpKMp3hfTArlmLYk3HYOgBMEhycdjxtJOH5KXYJ7cB865iCwSq/oZ1JdlBMNlJQ9je49IbQ2u9qNqpWlmh77g7IBabd9kY6cWd3hUeUOn4isexIvCC4sGvP8XiNsLyXtYF5fEOkBNJ8w8LVL+v

Steps to reproduce the bug

On line 16, no errors, fine.

On line 19, this.currentId is normally a number, but when chained, it generates a Typescript error. This is not shown in the playground (nor Stackblitz, nor Codesandbox), since this is typed as any, but in VSCode/Codium, this is correctly typed.

Expected behavior

No TS error on line 19

Actual behavior

image

Additional information

Fun fact: when not using the return value of added(this.currentId), no error is shown:

// This is OK
    addedIdWorkaround () {
      const test = useStore().added(this.currentId)
      return test.result
    }
Glandos commented 1 month ago

I'm using TS 5.4.5

posva commented 1 month ago

You probably need to explicitly type some of the getters or actions to avoid a cyclic type reference (that’s why you might see any)

Edit: yes that's what's missing:

export const useOtherStore = defineStore('second_store', {
  getters: {
    currentId() {
      return 1
    },
    addedId() {
      return useStore().added(1).result
    },
    addedIdBug(): number {
      return useStore().added(this.currentId).result
    },
  },
})