TypeScript实现对象键动态取自对象值的类型定义需求

直接利用TypeScript的泛型、索引访问类型和映射类型，就能实现让data的键严格对应xAxis和yAxis的具体字面量，同时强制至少包含这两个键，无需手动指定多个泛型参数。

核心类型定义 #

type AreaChartData<T extends { xAxis: string; yAxis: string }> = {
  xAxis: T['xAxis'];
  yAxis: T['yAxis'];
  // 强制包含xAxis和yAxis指定的键，同时允许额外任意键
  data: { [K in T['xAxis'] | T['yAxis']]: number } & Record<string, number>;
};

辅助函数自动推导类型 #

为了避免手动传入泛型参数，可以写一个辅助函数让TypeScript自动推导xAxis和yAxis的字面量类型：

function createAreaChartData<T extends { xAxis: string; yAxis: string }>(config: AreaChartData<T>) {
  return config;
}

使用示例 #

// ✅ 合法：包含指定的xAxis/yAxis键，同时允许额外键
const validChart = createAreaChartData({
  xAxis: 'timestamp',
  yAxis: 'temperature',
  data: {
    timestamp: 1717200000,
    temperature: 25.5,
    humidity: 60 // 额外键被允许
  }
});

// ❌ 不合法：缺少yAxis指定的键，TS会直接报错
const invalidChart = createAreaChartData({
  xAxis: 'timestamp',
  yAxis: 'temperature',
  data: {
    timestamp: 1717200000
    // 报错提示：缺少 "temperature" 属性
  }
});

关键原理 #

1. 索引访问类型：T['xAxis']和T['yAxis']会提取出xAxis和yAxis的具体字面量类型（比如'timestamp'），而不是宽泛的string类型。
2. 映射类型：{ [K in ...]: number }会生成一个包含指定键的类型，强制data必须拥有这些键。
3. 交叉类型：& Record<string, number>允许data包含额外的任意键，如果不需要额外键，可以直接去掉这部分。

这个方案基于最新TypeScript版本（5.0+）的字面量推导能力，完全满足动态将值转换为类型的需求。

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