如何从TypeScript联合类型中提取特定属性值生成新类型？

当然可以实现，你只需要利用TypeScript的索引访问类型结合泛型就能完成需求。

针对type属性的专用泛型 #

先实现一个专门提取type属性值的泛型：

type GetTypes<T extends { type: string }> = T['type'];

将你的Actions类型传入后，就能得到预期的联合类型：

type Actions =
  | {
  type: "ADD_COLUMN";
  newColumnIndex: number;
  column: SelectorColumnData;
}
  | {
  type: "ITEM_CHECKED";
  columnIndex: number;
  item: SelectorItem;
};

type ActionTypes = GetTypes<Actions>;
// ActionTypes = "ADD_COLUMN" | "ITEM_CHECKED"

更通用的泛型实现 #

如果需要提取任意属性的取值，可以写一个更灵活的泛型，支持指定属性名：

type GetPropertyValues<T, K extends keyof T> = T[K];

使用时传入目标类型和要提取的属性名即可：

type ActionTypes = GetPropertyValues<Actions, 'type'>;
// 结果同样为 "ADD_COLUMN" | "ITEM_CHECKED"

原理说明 #

当对联合类型使用索引访问时，TypeScript会自动遍历联合类型的每个成员，提取对应属性的取值，最终将这些取值合并成一个新的联合类型。泛型里的extends约束是为了确保传入的类型确实包含目标属性，避免类型错误。

内容的提问来源于stack exchange，提问作者serlingpa