Vuex: Actions not recognized when using ActionTree

Created on 28 Nov 2018 · 5Comments · Source: vuejs/vuex

Version

3.0.1

Reproduction link

https://github.com/farzadmf/vuex-action-tree-issue

Steps to reproduce

There's no need to run anything, just open the repo in VSCode, and you will see the error. I've added comments to make it clear

What is expected?

When I create an ActionTree<...>, I should be able to call my individual Actions on it

What is actually happening?

When I type my actions to be of type ActionTree<...>, then when I call my action(s), I see the error of "no compatible call signatures"

I've created constants to be used as names for my actions (so that I don't use strings). At first, I though that is what's causing the problem; that's why I created the 'hello()' function to test, and it seems to me the constants are not an issue here.

Source

farzadmf

Most helpful comment

Action type (which is a value of ActionTree object) is a union type of action handler (a function) and action object which is added via #941. You need to manually narrow the type when you annotate your action with ActionTree.

const action = typeSafeActions.hello as Function
action()

ktsn on 2 Dec 2018

❤5

All 5 comments

const action = typeSafeActions.hello as Function
action()

ktsn on 2 Dec 2018

❤5

Thank you @ktsn for your answer. I don't know if I'm missing something here, but I found it too much of a hassle if every time I need to manually specify the type of my action to be able to test them.

Just casting as Function won't work here because my actions need to take an ActionContext<S, R> as the first argument and payload: any as the second argument. It would be much nicer if TypeScript would infer those for me, and I didn't have to manually specify them.

farzadmf on 2 Dec 2018

@kktsn Can you please provide some reference on how to test vuex actions in TypeScript. I saw that there's a type ActionHandler<S, R> (as you mentioned), so I thought maybe I can cast what I have to that, but unfortunately, it's not exported, so I cannot access it.
Of course I can copy/paste what's there and create my own type, but wouldn't it make more sense to use what's already there?

farzadmf on 4 Dec 2018

👍1

Yeah I think a simple fix here is to export ActionHandler<S, R> and ActionObject<S, R> types/interfaces so we can correctly cast.

Even better (probably for "test-utils") is a provided type guard - but for now casting would suffice.