在TypeScript中如何遍历自定义接口类型对象的属性？

报错根因 #

TS7053错误的核心原因是：for...in 遍历出来的key默认被TypeScript推导为通用string类型，而你定义的MyInput接口没有声明通用字符串索引签名，TS无法确认这个string类型的key是MyInput的合法属性，因此禁止直接用它索引对象。

可行解决方案 #

方案1：给key添加类型断言（最简便，无需修改原有定义）

直接把遍历得到的key断言为keyof MyInput，明确告诉TS这个key是属于MyInput的合法属性即可：

ngOnInit() {
  for (const key in this.options) {
    const k = key as keyof MyInput;
    console.log(this.options[k]);
  }
}

方案2：使用Object.entries直接获取键值对

如果你同时需要读取键和对应值，用Object.entries的写法更简洁，不需要额外处理类型断言也不会触发报错：

ngOnInit() {
  Object.entries(this.options).forEach(([key, value]) => {
    console.log('属性名：', key, '属性值：', value);
  })
}

方案3：为接口添加索引签名（适合需要频繁动态索引的场景）

如果你的业务场景需要大量动态索引该接口的对象，可以直接在接口定义时添加索引签名，一劳永逸解决同类报错：

export interface MyInput {
    [key: string]: boolean | string | undefined;
    disabled?: boolean,
    type: 'text' | 'email' | 'password' | 'number',
    label?: string,
    placeholder?: string,
    helpText?: string
}

添加索引签名后，你原本的for-in循环无需修改任何内容就可以正常运行。

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