将具有两种泛型类型的泛型接口组合为仅具有一种泛型类型的一种类型

Question

In my case I'm working with useReducer from React but my question is a pure typescript issue.

Take following:

export interface State<T> {
  values: T;
  someOtherProp: boolean;
}

export interface ActionOne<T, K extends keyof T> {
  type: "UPDATE_VALUE_ONE";
  payload: { name: K; value: T[K] };
}


export interface ActionTwo<T, K extends keyof T> {
  type: "UPDATE_VALUE_TWO";
  payload: { name: K; value: T[K] };
}

Now the two action interfaces are combined into a single union type:

type ActionTypes<T, K extends keyof T> = ActionOne<T, K> | ActionTwo<T, K>

In the next step a function will use ActionTypes as the type of it's parameter:

export const reducer = <T>(
  state: State<T>,
  action: ActionTypes<T> // This already breaks because the second generic type is missing
): State<T> =>
{ 
   switch (action.type) {
     case "UPDATE_VALUE_ONE":
      return {
        ...state,
        values: { ...state.values, [action.payload.name]: action.payload.value}
      };
     case "UPDATE_VALUE_ONE":
    // ...
  }
}

As you can see in the code's comment ActionTypes<T> is already breaking. In my case I don't want the reducer function to worry about what type K of ActionTypes<T, K> is.

I know I could add keyof T to action: ActionTypes<T, keyof T> but ths would break the typechecking for this line:

values: { ...state.values, [action.payload.name]: action.payload.value}

because the type of [action.payload.name] coulde be different from action.payload.value

Actually it would even be more ideal if ActionType<T, K extends keyof T> would only have one generic type ( T ).

If ActionOne and ActionTwo were returned by a functions instead of passing them direclty as objec t it work would by declaring the functions inline:

type ActionTypes<T> =
 | (<T, K extends keyof T>() => ActionOne<T, K>)
 | (<T, K extends keyof T>() => ActionTwo<T, K>);`

Question

How can the information of a second generic type K of an interface be "hidden" when it is used in another interface/type that only declares one generic type T ? (Especially if K is anyway dependend on T by K extends keyof T .)

For generic functions this can be solved through inline declaration, so how can it be solved for interfaces?

Answer 1

In this case it seems like you would like the action parameter to be the union of all possible action types... for each possible K in keyof T . If so, I would use a distributive conditional type to break the union keyof T into each individual literal K , and get the union of all of ActionTypes<T, K> :

type SomeActionOne<T, K extends keyof T = keyof T> = K extends any
  ? ActionOne<T, K>
  : never;
type SomeActionTwo<T, K extends keyof T = keyof T> = K extends any
  ? ActionTwo<T, K>
  : never;
type AllPossibleActionTypes<T> = SomeActionOne<T> | SomeActionTwo<T>;

(UPDATE: I modified the above version of AllPossibleActionTypes<T> to distribute over ActionOne<T, K> for all K , and then separately distribute ActionTwo<T, K> for all K , and then unify them afterwards. Note that this is exactly the same type when you specify a concrete type T , but when T is still an unresolved generic the compiler reasons differently about them. Specifically, in the old version, the compiler would wait until it knew T to split the types into ActionOne and ActionTwo varieties; now the compiler knows this from the start.)

Then the signature of reducer would be:

export const reducer = <T>(
  state: State<T>,
  action: AllPossibleActionTypes<T>
): State<T> => { ... }

And you could see that you are reasonably hinted when you call reducer() :

reducer(
  { values: { a: "a", b: 1, c: true }, someOtherProp: true },
  { type: "UPDATE_VALUE_TWO", payload: { name: "b", value: 3 } }
); // hinted for value: number when you type in "b" for name

Okay, hope that helps; good luck!

Link to code