fix: add missing typings and docs of createNamespacedHelpers (#910)

* fix(typings): add missing createNamespacedHelpers typings

* docs(en): add a description of createNamespacedHelpers

* fix(typings): use interface rather than type alias

Author: ktsn

docs/en/api.md

@@ -193,3 +193,7 @@ const store = new Vuex.Store({ ...options })
   Create component methods options that commit a mutation. [Details](mutations.md#commiting-mutations-in-components)
 
   The first argument can optionally be a namespace string. [Details](modules.md#binding-helpers-with-namespace)
+
+- **`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)

docs/en/modules.md

@@ -206,6 +206,31 @@ methods: {
 }
 ```
 
+Furthermore, you can create namespaced helpers by using `createNamespacedHelpers`. It returns an object having new component binding helpers that are bound with the given namespace value:
+
+``` js
+import { createNamespacedHelpers } from 'vuex'
+
+const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
+
+export default {
+  computed: {
+    // look up in `some/nested/module`
+    ...mapState({
+      a: state => state.a,
+      b: state => state.b
+    })
+  },
+  methods: {
+    // look up in `some/nested/module`
+    ...mapActions([
+      'foo',
+      'bar'
+    ])
+  }
+}
+```
+
 #### Caveat for Plugin Developers
 
 You may care about unpredictable namespacing for your modules when you create a [plugin](plugins.md) that provides the modules and let users add them to a Vuex store. Your modules will be also namespaced if the plugin users add your modules under a namespaced module. To adapt this situation, you may need to receive a namespace value via your plugin option:

types/helpers.d.ts

@@ -1,32 +1,52 @@
 import Vue = require("vue");
 
 type Dictionary<T> = { [key: string]: T };
+type Computed = () => any;
+type MutationMethod = (...args: any[]) => void;
+type ActionMethod = (...args: any[]) => Promise<any>;
 
-export function mapState (map: string[]): Dictionary<() => any>;
-export function mapState (namespace: string, map: string[]): Dictionary<() => any>;
-export function mapState (map: Dictionary<string>): Dictionary<() => any>;
-export function mapState (namespace: string, map: Dictionary<string>): Dictionary<() => any>;
-export function mapState <S>(
-  map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
-): Dictionary<() => any>;
-export function mapState <S>(
-  namespace: string,
-  map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
-): Dictionary<() => any>;
+interface Mapper<R> {
+  (map: string[]): Dictionary<R>;
+  (map: Dictionary<string>): Dictionary<R>;
+}
 
-type MutationMethod = (...args: any[]) => void;
-export function mapMutations (map: string[]): Dictionary<MutationMethod>;
-export function mapMutations (namespace: string, map: string[]): Dictionary<MutationMethod>;
-export function mapMutations (map: Dictionary<string>): Dictionary<MutationMethod>;
-export function mapMutations (namespace: string, map: Dictionary<string>): Dictionary<MutationMethod>;
-
-export function mapGetters (map: string[]): Dictionary<() => any>;
-export function mapGetters (namespace: string, map: string[]): Dictionary<() => any>;
-export function mapGetters (map: Dictionary<string>): Dictionary<() => any>;
-export function mapGetters (namespace: string, map: Dictionary<string>): Dictionary<() => any>;
-
-type ActionMethod = (...args: any[]) => Promise<any[]>;
-export function mapActions (map: string[]): Dictionary<ActionMethod>;
-export function mapActions (namespace: string, map: string[]): Dictionary<ActionMethod>;
-export function mapActions (map: Dictionary<string>): Dictionary<ActionMethod>;
-export function mapActions (namespace: string, map: Dictionary<string>): Dictionary<ActionMethod>;
+interface MapperWithNamespace<R> {
+  (namespace: string, map: string[]): Dictionary<R>;
+  (namespace: string, map: Dictionary<string>): Dictionary<R>;
+}
+
+interface MapperForState {
+  <S>(
+    map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
+  ): Dictionary<Computed>;
+}
+
+interface MapperForStateWithNamespace {
+  <S>(
+    namespace: string,
+    map: Dictionary<(this: typeof Vue, state: S, getters: any) => any>
+  ): Dictionary<Computed>;
+}
+
+interface NamespacedMappers {
+  mapState: Mapper<Computed> & MapperForState;
+  mapMutations: Mapper<MutationMethod>;
+  mapGetters: Mapper<Computed>;
+  mapActions: Mapper<ActionMethod>;
+}
+
+export declare const mapState: Mapper<Computed>
+  & MapperWithNamespace<Computed>
+  & MapperForState
+  & MapperForStateWithNamespace;
+
+export declare const mapMutations: Mapper<MutationMethod>
+  & MapperWithNamespace<MutationMethod>;
+
+export declare const mapGetters: Mapper<Computed>
+  & MapperWithNamespace<Computed>;
+
+export declare const mapActions: Mapper<ActionMethod>
+  & MapperWithNamespace<ActionMethod>;
+
+export declare function createNamespacedHelpers(namespace: string): NamespacedMappers;

types/test/helpers.ts

@@ -4,9 +4,12 @@ import {
   mapState,
   mapGetters,
   mapActions,
-  mapMutations
+  mapMutations,
+  createNamespacedHelpers
 } from "../index";
 
+const helpers = createNamespacedHelpers('foo');
+
 new Vue({
   computed: Object.assign({},
     mapState(["a"]),
@@ -33,6 +36,19 @@ new Vue({
       e: "e"
     }),
 
+    helpers.mapState(["k"]),
+    helpers.mapState({
+      k: "k"
+    }),
+    helpers.mapState({
+      k: (state: any, getters: any) => state.k + getters.k
+    }),
+
+    helpers.mapGetters(["l"]),
+    helpers.mapGetters({
+      l: "l"
+    }),
+
     {
       otherComputed () {
         return "f";
@@ -59,6 +75,16 @@ new Vue({
       j: "j"
     }),
 
+    helpers.mapActions(["m"]),
+    helpers.mapActions({
+      m: "m"
+    }),
+
+    helpers.mapMutations(["n"]),
+    helpers.mapMutations({
+      n: "n"
+    }),
+
     {
       otherMethod () {}
     }