TypeScript动态对象类型定义报错：固定属性与索引签名类型不匹配问题求助

嘿，这个问题我之前也碰到过，本质是TypeScript对接口里索引签名和固定属性的类型兼容性要求导致的，我来给你拆解下怎么解决～

你原来的接口写法之所以报错，是因为TypeScript要求接口中的固定属性类型必须兼容索引签名的类型。你定义的字符串索引签名[key: string]: { '%': number, value: number, '%Acumulated': number }规定了所有字符串键的属性都必须是这个对象类型，但total、total_%、date的类型分别是number、number、string，和索引签名的类型完全不匹配，所以触发了类型不兼容的错误。

最稳妥的方式是把动态键部分和固定属性部分拆分开，用交叉类型合并，这样既保证了动态键的类型约束，又能保留固定属性的独立类型。

方法一：交叉类型（推荐） #

先分别定义动态数据的类型和固定属性的接口，再用&合并成最终类型：

// 定义动态键对应的 value 类型
type DynamicMetric = {
  '%': number;
  value: number;
  '%Acumulated': number;
};

// 定义固定属性的接口
interface FixedGraphProps {
  total: number;
  'total_%': number;
  date: string;
}

// 交叉合并成最终类型
type GraphReturns = Record<string, DynamicMetric> & FixedGraphProps;

这里Record<string, DynamicMetric>等价于你原来的动态索引签名，但把它和固定属性接口交叉后，TypeScript会正确识别：所有自定义字符串键的属性必须是DynamicMetric类型，而total等固定属性则遵循各自的类型定义。

使用示例 #

创建符合这个类型的对象时，既可以添加任意自定义键，也必须包含固定属性：

const monthlyGraph: GraphReturns = {
  'january': { '%': 10, value: 500, '%Acumulated': 10 },
  'february': { '%': 15, value: 750, '%Acumulated': 25 },
  total: 5000,
  'total_%': 100,
  date: '2024-Q1'
};

注意事项 #

要确保你的动态键名称不会和total、total_%、date重复，否则TypeScript会因为属性类型冲突报错（毕竟同一个键不能同时是DynamicMetric和number/string）。

备选方法：放宽索引签名类型（不推荐） #

如果你不想用交叉类型，也可以把索引签名的类型改成联合类型，允许动态键的属性是DynamicMetric、number或string，但这种方式会弱化类型约束——因为它允许任意字符串键的属性是这三种类型中的任意一种，无法保证动态键一定是DynamicMetric类型，所以只在特殊场景下使用：

interface GraphReturns {
  [key: string]: { '%': number, value: number, '%Acumulated': number } | number | string;
  total: number;
  'total_%': number;
  date: string;
}

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