TypeScript中如何通过对象key的索引获取对应属性值？

错误原因 #

TypeScript 中Object.keys()方法的返回值类型被默认推导为string[]，而你声明的payments对象没有显式配置字符串类型的索引签名，TypeScript 无法确认你动态拿到的key一定是payments的合法属性，因此抛出ts(7053)错误。代码运行正常是因为运行时JS本身支持动态索引访问，只是TS的静态类型检查不通过。

解决方案 #

下面是三种常用的修复方案：

• 方案1：给payments添加索引签名
  适合键名不固定、可以是任意字符串的场景

  type PaymentItem = { prop1: string }
  // 显式声明payments可以被字符串类型的key索引
  const payments: { [key: string]: PaymentItem } = {
    KEY1: {prop1: "prop1"},
    KEY2: {prop1: "prop1"}
  }
  
  const index = 0
  const key = Object.keys(payments)[index]
  const payment = payments[key]
  

• 方案2：用keyof typeof做类型断言
  适合payments的键是固定值、不想放宽类型约束的场景，类型安全度更高

  const payments = {
    KEY1: {prop1: "prop1"},
    KEY2: {prop1: "prop1"}
  }
  
  const index = 0
  // 断言key是payments的合法键
  const key = Object.keys(payments)[index] as keyof typeof payments
  const payment = payments[key]
  

• 方案3：用枚举+Record约束类型
  适合键名是固定枚举值的工程化场景，可维护性更强

  // 先定义键的枚举
  enum PaymentKey {
    KEY1 = 'KEY1',
    KEY2 = 'KEY2'
  }
  type PaymentItem = { prop1: string }
  
  const payments: Record<PaymentKey, PaymentItem> = {
    [PaymentKey.KEY1]: {prop1: "prop1"},
    [PaymentKey.KEY2]: {prop1: "prop1"}
  }
  
  const index = 0
  const key = Object.keys(payments)[index] as PaymentKey
  const payment = payments[key]
  

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