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

Question

就我而言，我正在使用来自 React 的 useReducer，但我的问题是纯粹的打字稿问题。

采取以下措施：

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] };
}

现在这两个动作接口合并为一个联合类型：

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

在下一步中，函数将使用ActionTypes 作为其参数的类型：

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":
    // ...
  }
}

正如您在代码注释中看到的那样，ActionTypes<T> 已经崩溃了。 就我而言，我不希望reducer 函数担心ActionTypes<T, K> 的K 是什么类型。

我知道我可以将 keyof T 添加到 action: ActionTypes<T, keyof T> 但这会破坏这一行的类型检查：

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

因为[action.payload.name] 的类型可能与action.payload.value 不同

实际上，如果 ActionType<T, K extends keyof T> 只有一种泛型类型 (T) 会更理想。

如果 ActionOne 和 ActionTwo 由函数返回，而不是直接将它们作为对象传递，则它可以通过将函数声明为内联：

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

问题

当一个接口的第二个泛型类型K 用在另一个只声明一个泛型类型T 的接口/类型中时，如何“隐藏”它的信息？ （特别是如果K 无论如何都依赖于T 由K extends keyof T。）

对于泛型函数，这可以通过内联声明来解决，那么对于接口如何解决呢？

Answer 1

在这种情况下，您似乎希望action 参数成为所有可能的操作类型的联合...对于keyof T 中的每个可能的K。如果是这样，我将使用distributive conditional type 将联合keyof T 分解为每个单独的文字K，并获得所有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>;

(更新：我修改了上面版本的AllPossibleActionTypes<T>，将ActionOne<T, K>分配给所有K，然后将ActionTwo<T, K>单独分配给所有K，然后再统一它们。注意这是完全相同的类型当您指定具体类型 T，但当 T 仍然是未解析的泛型时，编译器对它们的解释不同。具体来说，在旧版本中，编译器会等到它知道T 将类型拆分为ActionOne 和ActionTwo 变体；现在编译器从一开始就知道这一点。）

那么reducer的签名就是：

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

你可以看到当你打电话给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

好的，希望对您有所帮助；祝你好运！

Link to code