Incorrect typescript type when using a function to generate Models with generic types

(duplicate of https://github.com/ctrlplusb/easy-peasy/issues/189, but it seems to have broken again)

I am trying to make a model factory function to generate simple models with just a value and a setter action, where the value is of a generic type. When doing this the action’s state isn’t correctly typed.

example:

import { Action, action } from "easy-peasy";

interface SimpleModel<T> {
  value: T;
  set: Action<SimpleModel<T>, T>;
}

function makeSimpleModel<T>(initialValue: T): SimpleModel<T> {
  return {
    value: initialValue,
    set: action((state, payload) => {
      state.value = payload;
    })
  };
}

…and heres a quick code sandbox https://codesandbox.io/s/sparkling-cookies-4tx0m (doesn’t do anything functional, just to demonstrate the red squiggly)

This generates a compiler error:

Property 'value' does not exist on type '_Merge<StateMapper<_Pick<_Pick<ListModel<T>, ({ 1: never; 0: "value"; }[Extends<T, ActionTypes>] & "value") | ({ 1: never; 0: "value"; }[Extends<T, ActionTypes>] & "set") | ({ 1: never; 0: "value"; }[Extends<...>] & "add") | ({ ...; }[Extends<...>] & "remove")>, (Exclude<...> & ... 1 more ... & "value") | ... 14 mor...'.ts(2339)

easy-peasy version: 3.0.2 (most recent) typescript version: 3.5.3 (most recent)

[ctrlplusb]

@williammetcalf this is a difficult case as the issue is that T could be an Action or any other type that our statemapper tries to strip out of your model definition when resolving the type for the state argument.

A workaround is to introduce a simple “tuple” type wrapper for T. This basically forces TypeScript to know that the value will never be one of the types it wants to filter, as it is boxed in a valid state type.

For example…

type Value<T> = [T];

interface SimpleModel<T> {
  thevalue: Value<T>;
  theset: Action<SimpleModel<T>, T>;
}

const makeSimpleModel = <T>(initialValue: T): SimpleModel<T> => {
  return {
    thevalue: [initialValue],
    theset: action((state, payload) => {
      state.thevalue = [payload];
    }),
  };
};

Not ideal, as you have to unbox it when using it, but at least TypeScript would be warning you of this.

[ctrlplusb]

@pirix-gh it is indeed. I haven’t had time to apply the alternative strategy you proposed. 😃