Writing typesafe actions

[naiyt]

Writing typesafe actions

[naiyt]

Fiddled around for awhile and found a way to do it!

const actions = (store: Store<AppState>) => ({
  setLoading: (state: AppState, loading: boolean) => ({ loading }),
  setBlah: (state: AppState, fds: number) => ({ number })
});

type FuncTypeWithoutFirstArg<T extends (...args: any) => any> = T extends (arg1: infer U, ...args: infer V) => infer Q ? (...args: V) => void : any;
type ActionsObject = { [action: string]: (...args: any[]) => any };
type BoundActions<T extends ActionsObject> = {
  [P in keyof T]: FuncTypeWithoutFirstArg<T[P]>
}
type MyBoundActions = BoundActions<ReturnType<typeof actions>>;

Now in my component I can do

interface StoreProps extends BoundActions<ReturnType<typeof actions>> {
  readonly count: number;
}

And calling this.props.setLoading(false) or whatever will be properly type checked against the bound action.

The main magic is in the FuncTypeWithoutFirstArg type, which takes a function generic and defines a type where the first argument is omitted (which is what happens to the bound actions in your connected component).

It might be nice to have these types in the library, so I might open a PR for it

EDIT: Here's an even slicker way to do it:

import Store from "redux-zero/interfaces/Store";

export type FuncTypeWithoutFirstArg<T extends (...args: any) => any> =
  T extends (arg1: infer U, ...args: infer V) => infer Q ? (...args: V) => void : any;
export type ActionsObject = { [action: string]: (...args: any[]) => any };
export type Actions<T> = (store: Store<T>) => ActionsObject;
export type BindActions<State, T extends Actions<State>> = {
  [P in keyof ReturnType<T>]: FuncTypeWithoutFirstArg<ReturnType<T>[P]>
}

And then in your actions file, you just do:

const actions = (store: Store<AppState>) => ({
  setLoading: (state: AppState, loading: boolean) => ({ loading }),
});

export type BoundActions = BindActions<AppState, typeof actions>
export default actions;