使用打字稿删除异步 api 调用类型中的重复项

Question

我有以下类型的联合：

export interface GetAll { type: PeopleActionTypes.GET_ALL; }
export type GetAllOk = ApiActionCreator<{ type: PeopleActionTypes.GET_ALL_OK; }>;
export type GetAllFail = ApiActionCreator<{type: PeopleActionTypes.GET_ALL_FAIL}>;
export type GetOne = ApiActionCreator<{type: PeopleActionTypes.GET_ONE}>;
export type GetOneOk = ApiActionCreator<{type: PeopleActionTypes.GET_ONE_OK}>;
export type GetOneFail = ApiActionCreator<{type: PeopleActionTypes.GET_ONE_FAIL}>;
export type Add = ApiActionCreator<{type: PeopleActionTypes.ADD}, Fetchable<Person>>;
export type AddOK = ApiActionCreator<{type: PeopleActionTypes.ADD_OK}, Fetchable<Person>[]>;
export type AddFail = ApiActionCreator<{type: PeopleActionTypes.ADD_FAIL}>;
export type Update = ApiActionCreator<{type: PeopleActionTypes.UPDATE}>;
export type UpdateOK = ApiActionCreator<{type: PeopleActionTypes.UPDATE_OK}, Fetchable<Person>[]>;
export type UpdateFail = ApiActionCreator<{type: PeopleActionTypes.UPDATE_FAIL}>;
export type Remove = ApiActionCreator<{type: PeopleActionTypes.REMOVE}>;
export type RemoveOK = ApiActionCreator<{type: PeopleActionTypes.REMOVE_OK}>;
export type RemoveFail = ApiActionCreator<{type: PeopleActionTypes.REMOVE_FAIL}>;
export type ResetPassword = ApiActionCreator<{type: PeopleActionTypes.RESET_PASSWORD}>;
export type ResetPasswordOK = ApiActionCreator<{type: PeopleActionTypes.RESET_PASSWORD_OK}>;
export type ResetPasswordFail = ApiActionCreator<{type: PeopleActionTypes.RESET_PASSWORD_FAIL}>;

export interface SetCurrent {
  type: PeopleActionTypes.SET_CURRENT;
  id: string;
};

export type PeopleActionCreators =
    SetCurrent
    | GetAll
    | GetAllOk
    | GetAllFail
    | GetOne
    | GetOneOk
    | GetOneFail
    | Add
    | AddOK
    | AddFail
    | Update
    | UpdateOK
    | UpdateFail
    | Remove
    | RemoveOK
    | RemoveFail
    | ResetPassword
    | ResetPasswordOK
    | ResetPasswordFail;

我的ApiActionCreator 看起来像这样：

export type ApiActionCreator<T extends object, Payload = object | any[] | undefined> = T & { payload: Payload, error: ErrorMessage }

对于每个操作，我都有一个Xxx、XxxOK 和一个XxxFail。

在打字稿中无论如何我可以以某种方式生成这些类型，而不必为永远操作创建所有 3 个？

Answer 1

您可以避免通过使用条件声明所有联合，条件类型分布在包含联合的类型参数上。使用这种行为，我们可以将ApiActionCreator 应用于枚举文字联合的所有成员。

我们可以得到PeopleActionTypes 中除SET_CURRENT 之外的所有文字枚举的并集，使用Exclude 条件类型（type PeopleActionTypesKeys = Exclude<PeopleActionTypes, PeopleActionTypes.SET_CURRENT>）以不同的方式处理它

剩下的唯一问题是某些操作类型的自定义有效负载。我们可以使用对象类型作为映射来保持枚举成员和有效负载类型之间的关系。

type GetPayload<TPayloadMap, T extends PropertyKey> = TPayloadMap extends Record<T, infer U> ? U : undefined;

export type StandardActions<TEnumKeys, TPayloadMap> =
    TEnumKeys extends any  ? ApiActionCreator<{type: TEnumKeys }, GetPayload<TPayloadMap, TEnumKeys>> 
    : never ;


export interface SetCurrent {
    type: PeopleActionTypes.SET_CURRENT;
    id: string;
};

type PeopleActionTypesKeys = Exclude<PeopleActionTypes, PeopleActionTypes.SET_CURRENT>

export type PeopleActionCreators = SetCurrent | StandardActions<PeopleActionTypesKeys, {
    [PeopleActionTypes.ADD]: Fetchable<Person>,
    [PeopleActionTypes.UPDATE]: Fetchable<Person>,
    [PeopleActionTypes.ADD_OK]: Fetchable<Person>,
}>;

上述解决方案的重复较少，不幸的是，如果您将鼠标悬停在 PeopleActionCreators 上，您会丢失类型别名的好听的名称：

type PeopleActionCreators = SetCurrent | ApiActionCreator<{
    type: PeopleActionTypes.GET_ALL;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.GET_ALL_OK;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.GET_ALL_FAIL;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.GET_ONE;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.GET_ONE_OK;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.GET_ONE_FAIL;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.ADD;
}, Fetchable<Person>> | ApiActionCreator<{
    type: PeopleActionTypes.ADD_OK;
}, Fetchable<Person>> | ApiActionCreator<{
    type: PeopleActionTypes.ADD_FAIL;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.UPDATE;
}, Fetchable<Person>> | ApiActionCreator<{
    type: PeopleActionTypes.UPDATE_OK;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.UPDATE_FAIL;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.REMOVE;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.REMOVE_OK;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.REMOVE_FAIL;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.RESET_PASSWORD;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.RESET_PASSWORD_OK;
}, undefined> | ApiActionCreator<{
    type: PeopleActionTypes.RESET_PASSWORD_FAIL;
}, undefined>

这样的可读性要差得多，即使它做同样的事情，代码本身也可能对其他人来说更难理解。