如何通过泛型参数传递基本类型作为对象动态属性键？

你原来的写法存在TypeScript语法限制，无法直接通过interface实现这种动态指定单个属性名的需求，下面是正确的实现方案：

核心思路 #

通过类型别名+交叉类型，将固定的分页属性部分与泛型指定的动态属性部分合并，同时给泛型键名添加类型约束，确保它符合对象键的合法类型。

正确实现代码 #

// 定义泛型类型，Key约束为字符串类型，Content是动态属性的元素类型
type Pagination<Key extends string, Content> = {
  // 固定的分页属性
  pagination: {
    total: number;
    page: number;
  };
} & {
  // 泛型指定的动态属性，键名由Key参数决定，值为Content数组
  [K in Key]: Content[];
};

使用示例 #

// 先定义业务数据类型（比如商品）
type Product = {
  id: number;
  name: string;
};

// 生成包含products动态属性的分页类型
type ProductData = Pagination<'products', Product>;

// 符合类型约束的对象实例
const productResponse: ProductData = {
  pagination: {
    total: 50,
    page: 2
  },
  products: [
    { id: 10, name: "无线耳机" },
    { id: 11, name: "智能手表" }
  ]
};

为什么原写法不生效？ #

TypeScript的interface不支持直接将模板字符串（如${key}）作为单个属性名定义，这种场景需要用映射类型（[K in Key]）来将泛型参数转化为具体的对象属性键，再通过交叉类型与固定属性部分合并。

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