feat: Enhance namespace helper with generic powered StateBindingHelper

src/bindings.ts

@@ -9,7 +9,7 @@ import {
 
 export type VuexDecorator = <V extends Vue> (proto: V, key: string) => void
 
-export type StateTransformer = (state: any, getters: any) => any
+export type StateTransformer<S = any, G = any> = (state: S, getters: G) => any
 
 export type MapHelper = typeof mapState | typeof mapGetters
   | typeof mapActions | typeof mapMutations
@@ -23,26 +23,30 @@ export interface BindingHelper {
   (type: string, options?: BindingOptions): VuexDecorator
 }
 
-export interface StateBindingHelper extends BindingHelper {
-  (type: StateTransformer, options?: BindingOptions): VuexDecorator
+export interface StateBindingHelper<S = any, G = any> extends BindingHelper {
+  (type: StateTransformer<S, G>, options?: BindingOptions): VuexDecorator
 }
 
-export interface BindingHelpers {
-  State: StateBindingHelper
+export interface BindingHelpers<S, G> {
+  State: StateBindingHelper<S, G>
   Getter: BindingHelper
   Mutation: BindingHelper
   Action: BindingHelper
 }
 
-export const State = createBindingHelper('computed', mapState) as StateBindingHelper
+export const State = createBindingHelper('computed', mapState) as StateBindingHelper<any, any>
 
 export const Getter = createBindingHelper('computed', mapGetters)
 
 export const Action = createBindingHelper('methods', mapActions)
 
 export const Mutation = createBindingHelper('methods', mapMutations)
 
-export function namespace (namespace: string): BindingHelpers
+export function namespace<H extends BindingHelpers<any, any>>(
+  namespace: string
+): H extends BindingHelpers<infer State, infer G>
+  ? BindingHelpers<State, G>
+  : BindingHelpers<any, any>
 export function namespace <T extends BindingHelper> (
   namespace: string,
   helper: T

test/bindings.ts

@@ -8,7 +8,8 @@ import {
   Getter,
   Action,
   Mutation,
-  namespace
+  namespace,
+  BindingHelpers
 } from '../src/bindings'
 
 Vue.config.productionTip = false
@@ -62,28 +63,48 @@ describe('binding helpers', () => {
   })
 
   it('State: namespace', () => {
+    type ComplexNumber = {
+      real: number
+      imaginary: number
+    }
+
+    type FooState = ComplexNumber
+
     const store = new Vuex.Store({
       modules: {
         foo: {
           namespaced: true,
-          state: { value: 1 }
+          state: {
+            real: 1,
+            imaginary: 2
+          } as FooState
         }
       }
     })
 
-    const foo = namespace('foo')
+    const foo = namespace<BindingHelpers<FooState, any>>('foo')
 
     @Component
     class MyComp extends Vue {
-      @foo.State('value')
+      @foo.State('real')
       bar: number
 
-      @foo.State value: number
+      @foo.State real: number
+
+      @foo.State((state) => {
+        return {
+          real: -state.real,
+          imaginary: -state.imaginary
+        }
+      })
+      negative: ComplexNumber
     }
 
     const c = new MyComp({ store })
     assert(c.bar === 1)
-    assert(c.value === 1)
+    assert(c.real === 1)
+    assert(c.negative.real === -1)
+    assert(c.negative.imaginary === -2)
   })
 
   it('Getter: type', () => {