如何在TypeScript中构建适配多数据模型的响应接口？

你可以通过泛型接口解决这个问题，把固定的响应结构抽成通用模板，让data字段的类型可以动态指定，既复用代码又保证类型安全。

1. 定义泛型响应接口 #

将原本的Response接口改成泛型形式，用<T>指代data数组的元素类型：

export interface ApiResponse<T> {
  count: number;
  data: T[];
  page: number;
  pageSize: number;
  totalCount: number;
}

2. 针对不同场景指定泛型参数 #

需要不同data类型时，给泛型传入对应类型即可：

• 当data是ICard[]时：

// 定义卡片列表的响应类型
type CardListResponse = ApiResponse<ICard>;

// 使用示例
const cardResp: CardListResponse = {
  page: 1,
  pageSize: 250,
  count: 250,
  totalCount: 15851,
  data: [{ /* 符合ICard结构的对象 */ }]
};

• 当data是ISets[]时：

// 定义集合列表的响应类型
type SetsListResponse = ApiResponse<ISets>;

// 使用示例
const setsResp: SetsListResponse = {
  page: 1,
  pageSize: 250,
  count: 250,
  totalCount: 15851,
  data: [{ /* 符合ISets结构的对象 */ }]
};

这种方式的优势是，固定响应字段（page、pageSize等）只需定义一次，后续新增其他data类型时，直接复用泛型接口即可，无需重复编写冗余代码。

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