dispatcher typescript declaration fix

[kalyabin]

With clear JavaScript Vuex.Store I can use logic like this:

const myListStore = new Vuex.Store({
    state: {
        list: []
    },
    mutations: {
        addItem: function (state, item) {
            state.list.push(item);
        }
    },
    actions: {
        getItemById: function (action, itemId) {
            return new Promise(function (resolve, reject) {
                for (var i in action.state.list) {
                    if (action.state.list[i].id == itemId) {
                        resolve(action.state.list[i]);
                        return;
                    }
                }
                reject();
            });
        }
    }
});

Using TypeScript it will be:

const myListStore = new Vuex.Store<MyStateInterface>({
    state: {
        list: []
    },
    mutations: {
        addItem: (state, item: MyItemInterface) => {
            state.list.push(item);
        }
    },
    actions: {
        getItemById: (action, itemId: number) => new Promise<MyItemInterface>((resolve, reject) => {
            for (let i in action.state.list) {
                if (action.state.list[i].id == itemId) {
                    resolve(action.state.list[i]);
                    return;
                }
            }
            reject();
        })
    }
});

But I can't use it, because returned promise in Dispatch type uses strict type:

export interface Dispatch {
  (type: string, payload?: any, options?: DispatchOptions): Promise<any[]>;
  <P extends Payload>(payloadWithType: P, options?: DispatchOptions): Promise<any[]>;
}

Is it possible to change Dispatch type?

[ktsn]

Why this fix is related with the example code that you provided? Looks like the example includes no dispatch...

[kalyabin]

Full example for this fix:

export interface MyItemInterface {
    id: number;
    name: string;
}

export interface MyStateInterface {
    list: Array<MyItemInterface>
}

const myListStore = new Vuex.Store<MyStateInterface>({
    state: {
        list: []
    },
    mutations: {
        addItem: (state: MyStateInterface, item: MyItemInterface) => {
            state.list.push(item);
        }
    },
    actions: {
        getItemById: (action, itemId: number) => new Promise<MyItemInterface>((resolve, reject) => {
            for (let item of action.state.list) {
                if (item.id == itemId) {
                    resolve(item);
                }
            }
            reject();
        })
    }
});

myListStore.commit('addItem', {
    id: 1,
    name: 'first item name'
});
myListStore.commit('addItem', {
    id: 2,
    name: 'second item name'
});

myListStore.dispatch('getItemById', 1).then((item: MyItemInterface) => {
    console.log(item);
}, () => {
    console.log('item not found');
});

This code:

myListStore.dispatch('getItemById', 1).then((item: MyItemInterface) => {
    console.log(item);
}, () => {
    console.log('item not found');
});

Throws compilation exception:

error TS2345: Argument of type '(item: MyItemInterface) => void' is not assignable to parameter of type '(value: any[]) => void | PromiseLike<void>'.
  Types of parameters 'item' and 'value' are incompatible.
    Type 'any[]' is not assignable to type 'MyItemInterface'.
      Property 'id' is missing in type 'any[]'.

[ktsn]

OK, I see.

[b-zee]

Is there a temporary solution to circumvent this problem? Or can I request that a patch version of Vuex is published to apply this fix?

[kalyabin]

I've completle fixed that problem and you can request this as a patch. @ktsn ?

[b-zee]

Version 2.4.0 has been released. It includes the fix.

https://github.com/vuejs/vuex/releases/tag/v2.4.0