No Ts check between actions inside Pinia Store

[paulbgomez]

Hello!

So inside my Pinia Store, I have actions; but they don't seem to have autocomplete or check the params when I use them inside the store. The same happens when referencing the state.

So for example I do:

export interface NameDGZ {
    name: string,
    counter: number
}

export const useStore = defineStore('main', {
  state: (): NameDGZ => ({
    counter: 0,
    name: 'Boo'
  }),
  actions: {
    giveNewName(name: string) {
        // here I don't have autocompletion, I don't understand why if I'm referencing the store state
        this.name = name;
    },
    concatNames() {
        // here there should also be autocompletion + typecheck. None of them are happening. I can write a number and no error will be triggered
        this.giveNewName(87564);
    },
  },
})

Any idea why is this happening?

Thanks!!!!!

[Lilja]

In my experience, typescript + implicit this doesn't really play nice. Just try to use vue2 with typescript and write your components with vue.extend-syntax! It doesn't work well.

If I were in your shoes I would refactor your store into composition API.

export const useStore = defineStore('main', () => {
  const state = reactive({
    counter: 0,
    name: 'Boo'
  } as NameDGZ)

  const giveNewName = (name: string) => {
    state.name = name;
  };
  const concatNames = () => {
    giveNewName(87564);
  }
});

[posva]

Make sure strict is set to true in your tsconfig and no option is overriding it

[luckystilet]

What about:

const state = (): nameGDZ => ({
  counter: 0,
  name: 'Boo'
})

const actions = {
    giveNewName(name: string) {
      // ...
    },
    concatNames() {
        actions.giveNewName(87564); // TS error
    },
}

export const useStore = defineStore('main', {
  state,
  getters,
  actions,
})

[Hossam-M10]

How to access state inside actions?