feat: improve helper types for more type safety

docs/en/api.md

@@ -212,6 +212,8 @@ const store = new Vuex.Store({ ...options })
 
   The first argument can optionally be a namespace string. [Details](modules.md#binding-helpers-with-namespace)
 
-- **`createNamespacedHelpers(namespace: string): Object`**
+- **`createNamespacedHelpers(namespace?: string): Object`**
 
   Create namespaced component binding helpers. The returned object contains `mapState`, `mapGetters`, `mapActions` and `mapMutations` that are bound with the given namespace. [Details](modules.md#binding-helpers-with-namespace)
+
+  If the namespace is not specified, it returns the root mapXXX helpers. This behavior is convenient to annotate strict types for mapXXX helpers.

package.json

@@ -65,11 +65,11 @@
     "rollup-watch": "^4.3.1",
     "selenium-server": "^2.53.1",
     "todomvc-app-css": "^2.1.0",
-    "typescript": "^2.5.3",
+    "typescript": "^2.6.1",
     "uglify-js": "^3.1.2",
-    "vue": "^2.5.0",
+    "vue": "^2.5.13",
     "vue-loader": "^13.3.0",
-    "vue-template-compiler": "^2.5.0",
+    "vue-template-compiler": "^2.5.13",
     "webpack": "^3.7.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.19.1"

src/helpers.js

@@ -111,14 +111,16 @@ export const mapActions = normalizeNamespace((namespace, actions) => {
 
 /**
  * Rebinding namespace param for mapXXX function in special scoped, and return them by simple object
- * @param {String} namespace
+ * If the namespace is not specified, it returns the root mapXXX helpers.
+ * This behavior is convenient to annotate strict types for mapXXX helpers.
+ * @param {String} [namespace]
  * @return {Object}
  */
 export const createNamespacedHelpers = (namespace) => ({
-  mapState: mapState.bind(null, namespace),
-  mapGetters: mapGetters.bind(null, namespace),
-  mapMutations: mapMutations.bind(null, namespace),
-  mapActions: mapActions.bind(null, namespace)
+  mapState: namespace ? mapState.bind(null, namespace) : mapState,
+  mapGetters: namespace ? mapGetters.bind(null, namespace) : mapGetters,
+  mapMutations: namespace ? mapMutations.bind(null, namespace) : mapMutations,
+  mapActions: namespace ? mapActions.bind(null, namespace) : mapActions
 })
 
 /**

test/unit/helpers.spec.js

@@ -517,4 +517,56 @@ describe('Helpers', () => {
     vm.actionB()
     expect(actionB).toHaveBeenCalled()
   })
+
+  it('createNamespacedHelpers: generates root helpers', () => {
+    const actionA = jasmine.createSpy()
+    const actionB = jasmine.createSpy()
+    const store = new Vuex.Store({
+      state: { count: 0 },
+      getters: {
+        isEven: state => state.count % 2 === 0
+      },
+      mutations: {
+        inc: state => state.count++,
+        dec: state => state.count--
+      },
+      actions: {
+        actionA,
+        actionB
+      }
+    })
+    const {
+      mapState,
+      mapGetters,
+      mapMutations,
+      mapActions
+    } = createNamespacedHelpers()
+    const vm = new Vue({
+      store,
+      computed: {
+        ...mapState(['count']),
+        ...mapGetters(['isEven'])
+      },
+      methods: {
+        ...mapMutations(['inc', 'dec']),
+        ...mapActions(['actionA', 'actionB'])
+      }
+    })
+    expect(vm.count).toBe(0)
+    expect(vm.isEven).toBe(true)
+    store.state.count++
+    expect(vm.count).toBe(1)
+    expect(vm.isEven).toBe(false)
+    vm.inc()
+    expect(store.state.count).toBe(2)
+    expect(store.getters.isEven).toBe(true)
+    vm.dec()
+    expect(store.state.count).toBe(1)
+    expect(store.getters.isEven).toBe(false)
+    vm.actionA()
+    expect(actionA).toHaveBeenCalled()
+    expect(actionB).not.toHaveBeenCalled()
+    vm.actionB()
+    expect(actionB).toHaveBeenCalled()
+  })
 })

types/helpers.d.ts

@@ -1,69 +1,118 @@
 import Vue from 'vue';
 import { Dispatch, Commit } from './index';
 
-type Dictionary<T> = { [key: string]: T };
-type Computed = () => any;
-type MutationMethod = (...args: any[]) => void;
-type ActionMethod = (...args: any[]) => Promise<any>;
-type CustomVue = Vue & Dictionary<any>
-
-interface Mapper<R> {
-  (map: string[]): Dictionary<R>;
-  (map: Dictionary<string>): Dictionary<R>;
+/**
+ * Utility types to declare helper types
+ */
+type Computed<R> = () => R;
+type Method<R> = (...args: any[]) => R;
+type CustomVue = Vue & Record<string, any>;
+
+interface BaseType { [key: string]: any }
+
+interface BaseStateMap<State, Getters> {
+  [key: string]: (this: CustomVue, state: State, getters: Getters) => any;
+}
+
+interface BaseMethodMap<F> {
+  [key: string]: (this: CustomVue, fn: F, ...args: any[]) => any;
+}
+
+type MethodType = 'optional' | 'normal'
+
+/**
+ * Return component method type for a mutation.
+ * You can specify `Type` to choose whether the argument is optional or not.
+ */
+type MutationMethod<P, Type extends MethodType> = {
+  optional: (payload?: P) => void;
+  normal: (payload: P) => void;
+}[Type];
+
+/**
+ * Return component method type for an action.
+ * You can specify `Type` to choose whether the argument is optional or not.
+ */
+type ActionMethod<P, Type extends MethodType> = {
+  optional: (payload?: P) => Promise<any>;
+  normal: (payload: P) => Promise<any>;
+}[Type];
+
+/**
+ * mapGetters
+ */
+interface MapGetters<Getters> {
+  <Key extends keyof Getters>(map: Key[]): { [K in Key]: Computed<Getters[K]> };
+  <Map extends Record<string, keyof Getters>>(map: Map): { [K in keyof Map]: Computed<Getters[Map[K]]> };
+}
+
+interface RootMapGetters<Getters> extends MapGetters<Getters> {
+  <Key extends keyof Getters>(namespace: string, map: Key[]): { [K in Key]: Computed<Getters[K]> };
+  <Map extends Record<string, keyof Getters>>(namespace: string, map: Map): { [K in keyof Map]: Computed<Getters[Map[K]]> };
+}
+
+/**
+ * mapState
+ */
+interface MapState<State, Getters> {
+  <Key extends keyof State>(map: Key[]): { [K in Key]: Computed<State[K]> };
+  <Map extends Record<string, keyof State>>(map: Map): { [K in keyof Map]: Computed<State[Map[K]]> };
+  <Map extends BaseStateMap<State, Getters>>(map: Map): { [K in keyof Map]: Computed<any> };
 }
 
-interface MapperWithNamespace<R> {
-  (namespace: string, map: string[]): Dictionary<R>;
-  (namespace: string, map: Dictionary<string>): Dictionary<R>;
+interface RootMapState<State, Getters> extends MapState<State, Getters> {
+  <Key extends keyof State>(namespace: string, map: Key[]): { [K in Key]: Computed<State[K]> };
+  <Map extends Record<string, keyof State>>(namespace: string, map: Map): { [K in keyof Map]: Computed<State[Map[K]]> };
+  <Map extends BaseStateMap<State, Getters>>(namespace: string, map: Map): { [K in keyof Map]: Computed<any> };
 }
 
-interface FunctionMapper<F, R> {
-  (map: Dictionary<(this: CustomVue, fn: F, ...args: any[]) => any>): Dictionary<R>;
+/**
+ * mapMutations
+ */
+interface MapMutations<Mutations, Type extends MethodType> {
+  <Key extends keyof Mutations>(map: Key[]): { [K in Key]: MutationMethod<Mutations[K], Type> };
+  <Map extends Record<string, keyof Mutations>>(map: Map): { [K in keyof Map]: MutationMethod<Mutations[Map[K]], Type> };
+  <Map extends BaseMethodMap<Commit<Mutations>>>(map: Map): { [K in keyof Map]: Method<any> };
 }
 
-interface FunctionMapperWithNamespace<F, R> {
-  (
-    namespace: string,
-    map: Dictionary<(this: CustomVue, fn: F, ...args: any[]) => any>
-  ): Dictionary<R>;
+interface RootMapMutations<Mutations, Type extends MethodType> extends MapMutations<Mutations, Type> {
+  <Key extends keyof Mutations>(namespace: string, map: Key[]): { [K in Key]: MutationMethod<Mutations[K], Type> };
+  <Map extends Record<string, keyof Mutations>>(namespace: string, map: Map): { [K in keyof Map]: MutationMethod<Mutations[Map[K]], Type> };
+  <Map extends BaseMethodMap<Commit<Mutations>>>(namespace: string, map: Map): { [K in keyof Map]: Method<any> };
 }
 
-interface MapperForState {
-  <S>(
-    map: Dictionary<(this: CustomVue, state: S, getters: any) => any>
-  ): Dictionary<Computed>;
+/**
+ * mapActions
+ */
+interface MapActions<Actions, Type extends MethodType> {
+  <Key extends keyof Actions>(map: Key[]): { [K in Key]: ActionMethod<Actions[K], Type> };
+  <Map extends Record<string, keyof Actions>>(map: Map): { [K in keyof Map]: ActionMethod<Actions[Map[K]], Type> };
+  <Map extends BaseMethodMap<Dispatch<Actions>>>(map: Map): { [K in keyof Map]: Method<any> };
 }
 
-interface MapperForStateWithNamespace {
-  <S>(
-    namespace: string,
-    map: Dictionary<(this: CustomVue, state: S, getters: any) => any>
-  ): Dictionary<Computed>;
+interface RootMapActions<Actions, Type extends MethodType> extends MapActions<Actions, Type> {
+  <Key extends keyof Actions>(namespace: string, map: Key[]): { [K in Key]: ActionMethod<Actions[K], Type> };
+  <Map extends Record<string, keyof Actions>>(namespace: string, map: Map): { [K in keyof Map]: ActionMethod<Actions[Map[K]], Type> };
+  <Map extends BaseMethodMap<Dispatch<Actions>>>(namespace: string, map: Map): { [K in keyof Map]: Method<any> };
 }
 
-interface NamespacedMappers {
-  mapState: Mapper<Computed> & MapperForState;
-  mapMutations: Mapper<MutationMethod> & FunctionMapper<Commit, MutationMethod>;
-  mapGetters: Mapper<Computed>;
-  mapActions: Mapper<ActionMethod> & FunctionMapper<Dispatch, ActionMethod>;
+/**
+ * namespaced helpers
+ */
+interface NamespacedMappers<State, Getters, Mutations, Actions, Type extends MethodType> {
+  mapState: MapState<State, Getters>;
+  mapGetters: MapGetters<Getters>;
+  mapMutations: MapMutations<Mutations, Type>;
+  mapActions: MapActions<Actions, Type>;
 }
 
-export declare const mapState: Mapper<Computed>
-  & MapperWithNamespace<Computed>
-  & MapperForState
-  & MapperForStateWithNamespace;
+export declare const mapState: RootMapState<BaseType, BaseType>;
 
-export declare const mapMutations: Mapper<MutationMethod>
-  & MapperWithNamespace<MutationMethod>
-  & FunctionMapper<Commit, MutationMethod>
-  & FunctionMapperWithNamespace<Commit, MutationMethod>;
+export declare const mapMutations: RootMapMutations<BaseType, 'optional'>;
 
-export declare const mapGetters: Mapper<Computed>
-  & MapperWithNamespace<Computed>;
+export declare const mapGetters: RootMapGetters<BaseType>;
 
-export declare const mapActions: Mapper<ActionMethod>
-  & MapperWithNamespace<ActionMethod>
-  & FunctionMapper<Dispatch, ActionMethod>
-  & FunctionMapperWithNamespace<Dispatch, ActionMethod>;
+export declare const mapActions: RootMapActions<BaseType, 'optional'>;
 
-export declare function createNamespacedHelpers(namespace: string): NamespacedMappers;
+export declare function createNamespacedHelpers(namespace?: string): NamespacedMappers<BaseType, BaseType, BaseType, BaseType, 'optional'>;
+export declare function createNamespacedHelpers<State, Getters, Mutations, Actions>(namespace?: string): NamespacedMappers<State, Getters, Mutations, Actions, 'normal'>;