Use of TypeScript generics breaks in Actions

[jmattheis]

I want to use generics in overmind actions, but this doesn't work correctly because the actions will be resolved without the generics.

Here an example.

state.ts

export enum Setting {
    Theme = 'theme',
    HideHeader = 'hideHeader',
}

type SettingState = {
    settings: Settings;
};

export type Settings = {
    [Setting.Theme]: 'dark' | 'light';
    [Setting.HideHeader]: boolean;
};

export const state: SettingState = {
    settings: {
        [Setting.Theme]: 'dark',
        [Setting.HideHeader]: false,
    },
};

actions.ts

import {Action, Config, IContext} from 'overmind';
import {Setting, Settings} from './state';

export const set = <T extends Setting>({state}: IContext<Config>, {key, value}: {key: T; value: Settings[T]}): void => {
    state.settings = {...state.settings, [key]: value};
};

export const test: Action = ({actions}) => {
    // should not compile but does
    // value takes type: 'dark' | 'light' | boolean;
    actions.set({key: Setting.Theme, value: true})

    // is correct
    actions.set({key: Setting.HideHeader, value: true})
    
    // should not compile but does
    actions.set({key: Setting.HideHeader, value: 'dark'})
};

With some workarounds it is possible to get it working but it doesn't look really good:

actions.ts@workaround

import {Action, Config, IContext} from 'overmind';
import {Setting, Settings} from './state';

// When returning a method with a generic type it does work, but we have to execute the state change inside an action therefore
// we need runInAction
export const set = ({actions}: IContext<Config>, _: void) => <T extends Setting>({key, value}: {key: T; value: Settings[T]}): void => {
    actions.settings.runInAction(({state}) => {
        state.settings = {...state.settings, [key]: value};
    })
};

export const runInAction: Action<(ctx: IContext<Config>) => void> = (context, callback) => callback(context);

export const test: Action = ({actions}) => {
    // does not compile: true is not assignable to 'dark' | 'light'
    actions.set()({key: Setting.Theme, value: true})

    // is correct
    actions.set()({key: Setting.HideHeader, value: true})

    // does not compile
    actions.set()({key: Setting.HideHeader, value: 'dark'})
};

Is there a better way to do this? We have an application that is heavily dependent on this pattern thus a more optimal solution would be awesome.

[christianalfoni]

The documentation is updated with a different default official typing pattern now, which supports generics. Let me know if you need any more information: https://overmindjs.org/core/typescript