如何通过属性别名扩展TypeScript类型以适配GraphQL响应？

要实现你需要的「保留原字段同时添加别名字段，且别名类型与原字段一致」的类型，可以通过TypeScript映射类型+交叉类型来完成，具体实现如下：

完整代码示例 #

// 先定义基础类型
type TTitle = string;
type TPerson = { name: string }; // 这里给TPerson一个示例定义，你可以根据实际情况调整

// 抽离原始固定字段的基础类型
type BaseData = {
  id: string,
  title: TTitle,
  owner: TPerson,
};

// 工具类型：根据别名映射生成对应的别名字段类型
type AliasFields<T, AliasMap extends Record<string, keyof T>> = {
  [AliasKey in keyof AliasMap]: T[AliasMap[AliasKey]];
};

// 最终的Data类型：合并基础类型和别名字段类型
type Data<AliasMap extends Record<string, keyof BaseData> = {}> = BaseData & AliasFields<BaseData, AliasMap>;

// 生成带别名的ExtendedData
type ExtendedData = Data<{ cardTitle: "title", author: "owner" }>;

类型验证 #

此时ExtendedData的类型完全符合你的预期：

// 等价于
type ExtendedData = {
  id: string,
  title: TTitle,
  owner: TPerson,
  cardTitle: TTitle,
  author: TPerson,
};

原理说明 #

• BaseData：把原始的固定字段单独抽离，避免重复定义，同时让别名映射的类型检查更精准。
• AliasFields：通过映射类型遍历传入的别名映射对象，每个别名键对应的值是原字段的名称，最终生成的类型中，别名字段的类型与原字段完全一致。
• Data泛型：使用交叉类型&将基础类型和别名字段类型合并，这样既保留了原字段，又新增了别名字段，完美匹配GraphQL查询响应中「原字段和别名字段同时存在」的场景。

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