如何结合TypeScript泛型与可变键？API通用响应体实现

你当前的GenericResponse接口存在类型冲突问题：data中的page和nextpage是number类型，但索引签名[key: string]: Type强制所有属性必须匹配Type类型，当你传入Client[]这类非number类型时，TypeScript会抛出类型不兼容的错误。

下面提供两种符合需求的实现方式，结合泛型和可变键来定义通用响应体：

方案一：指定单个可变数据键名与类型 #

适用于每个API响应中仅存在一个自定义数据键的场景，通过两个泛型参数分别指定键名和对应数据类型：

interface GenericResponse<DataKey extends string, DataType> {
  code: string;
  message: string;
  data: {
    page: number;
    nextpage: number;
  } & Record<DataKey, DataType>;
}

调用示例：

// 响应data包含page、nextpage和clients（类型为Client[]）
this.http.get<GenericResponse<'clients', Client[]>>();

// 另一个接口，data包含page、nextpage和orders（类型为Order[]）
this.http.get<GenericResponse<'orders', Order[]>>();

方案二：支持任意自定义数据结构 #

如果需要在data中包含多个可变键，或者自定义复杂的数据结构，可以将整个自定义数据部分作为泛型参数传入：

interface GenericResponse<CustomData extends Record<string, unknown>> {
  code: string;
  message: string;
  data: {
    page: number;
    nextpage: number;
  } & CustomData;
}

调用示例：

// 单个自定义键
this.http.get<GenericResponse<{ clients: Client[] }>>();

// 多个自定义键
this.http.get<GenericResponse<{ orders: Order[], userInfo: User }>>();

两种方案都保留了固定的code、message以及分页属性，同时通过泛型实现了自定义数据部分的灵活性，完全适配不同API场景的响应结构。

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