Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong type of argument to getters in options mode with typescript #1836

Closed
jhughes-dev opened this issue Dec 1, 2022 · 0 comments
Closed

Comments

@jhughes-dev
Copy link

jhughes-dev commented Dec 1, 2022

Reproduction

See Store Below

Steps to reproduce the bug

While trying to specify the types to get auto-suggestions when using the store within action and getter functions, I tried defining the types explicitly. My actual store as many actions/getters, so it made sense to separate these into different files, but I still wanted the good DX from VSCODE. Trying to make that happen, I found an issue with the type of the getter input. Add the following to a vue3+typescript project.

import {defineStore, Store} from "pinia";

type State = {
  count: number;
  name: string;
};

type Getters = {
  doubleCount: (state: StoreType) => number
}

type Actions = {
  increment: (this: StoreType) => void;
};

type StoreType = Store<string, State, Getters, Actions>;

const state = () : State => {
  return {
    count: 0,
    name: 'Eduardo'
  }
};

const getters: Getters = {
  doubleCount: (state: StoreType) => state.count * 2,
};

const actions: Actions = {
  increment() {
    console.log(this)
    this.$patch((state: State) => {
      console.log(state)
      this.doubleCount // Fine
      state.count++;
    })
  },

}
export const useCounterStore = defineStore<string, State, Getters, Actions>('counter', {
  state,
  getters,
  actions,
})

Expected behavior

I would expect that StoreType should work as the input to both getters and the $patch function input without error

Actual behavior

I see this error:

TS2344: Type 'Getters' does not satisfy the constraint '_GettersTree<State>'.
  Property 'doubleCount' is incompatible with index signature.
    Type '(state: StoreType) => number' is not assignable to type '(() => any) | ((state: { count: number; name: string; } & PiniaCustomStateProperties<State>) => any)'.
      Type '(state: StoreType) => number' is not assignable to type '() => any'.

Additional information

Note, I can change the type of the getter function from "StoreType" to "State" and it will compile, but other getters don't show up as suggestions in VSCode and if I try to use them, typescript complains.
However, if I debug or use base javascript, I can access other getters from within the getter function or action functions as properties of state/this, and they return the expected values (not the getter functions)

I have a similar problem using a $patch with a function if I try to make the argument "StoreType" instead of "State" and again, I should be able to access getters from within a patch function. (right?)

So, what should the type of the input to the getter function and $patch function be. I would assume:

State &  PiniaCustomStateProperties<State> & GetterProperties<Getters> 

where

type GetterProperties<Getters extends {[KeyType: string]: (...args: any[]) => any}> =  {
    [key in (keyof Getters)]: ReturnType<Getters[key]>
}
@vuejs vuejs locked and limited conversation to collaborators Dec 1, 2022
@posva posva converted this issue into discussion #1837 Dec 1, 2022

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant