TypeScript对象使用泛型动态键索引报TS7053错误的解决方法

报错根因 #

动态拼接生成的模板字符串类型为`intPricingPkg${number}`，TS静态检查阶段无法自动确认该动态值一定落在packages类型预定义的intPricingPkg1~intPricingPkg6固定键范围内，因此判定为非法索引，返回值隐式为any触发警告。

可落地修复方案 #

• 方案1：轻量类型断言（无需修改原有类型定义，改动量最小）
  将动态拼接生成的键直接断言为packages的合法键类型即可：

  <div className="price font-weight-bold">
    ₹ {car.packages?.[`intPricingPkg${carSearch.package === 0 ? 1 : carSearch.package}` as keyof NonNullable<typeof car.packages>]}
  </div>
  

  如果需要更严格的类型校验，可以只断言为定价包对应的键范围：

  const activePkgKey = `intPricingPkg${carSearch.package === 0 ? 1 : carSearch.package}` as `intPricingPkg${1|2|3|4|5|6}`
  // 直接访问即可
  car.packages?.[activePkgKey]
  

• 方案2：调整packages类型定义，兼容模板字符串索引（一劳永逸适配同类动态访问）
  给packages类型增加模板字符串格式的索引签名，从类型层面支持intPricingPkg+数字格式的键访问，要求TS版本≥4.1（该版本开始支持模板字符串索引签名）：

  packages?: {
    [key: `intPricingPkg${number}`]: number | undefined;
    intPricingExtraKm?: number;
    intPricingOutstationKm?: number;
    intPricingExtraHrs?: number;
    intPricingCommission?: number;
  }
  

  修改后原有访问代码不需要额外加断言即可通过类型检查。

• 方案3：收敛carSearch.package的类型范围，让TS自动推导合法键
  给carSearch.package字段限定取值范围为0|1|2|3|4|5|6，TS可以在拼接模板字符串时自动推导出生成的键落在合法范围内，不需要额外断言或修改packages类型：

  interface CarSearch {
    package: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    // 其余原有字段保持不变
  }
  

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