TypeScript中for..in遍历对象仍报TS7053错误的原因与解决方法

错误原因 #

TypeScript里for..in循环的遍历变量key默认会被推断为string类型，但你的Foo接口只定义了a、b两个明确的具名属性，没有声明接受任意字符串作为索引的签名。

静态类型检查时，TypeScript无法保证string类型的key一定是Foo的合法属性——哪怕实际运行时key只会是a或b，类型系统也不允许用宽泛的string去索引只有特定属性的对象，因此抛出TS7053错误。

解决方法 #

方法1：将key断言为keyof Foo #

直接把string类型的key缩小到Foo的属性名联合类型，这是最常用的方案：

interface Foo {
  a: number;
  b: number;
}

function doSomething(foo?: Foo) {
  if (foo) {
    for (const key in foo) {
      const typedKey = key as keyof Foo;
      console.log(foo[typedKey]);
    }
  }
}

方法2：给接口添加字符串索引签名 #

如果你的场景允许Foo对象拥有任意字符串属性，可以给接口添加索引签名，但这会放宽类型约束：

interface Foo {
  a: number;
  b: number;
  [key: string]: number; // 允许任意string类型的key，值为number
}

function doSomething(foo?: Foo) {
  if (foo) {
    for (const key in foo) {
      console.log(foo[key]);
    }
  }
}

方法3：使用Object.keys结合类型断言 #

先通过Object.keys获取对象的key数组，再遍历并断言类型：

interface Foo {
  a: number;
  b: number;
}

function doSomething(foo?: Foo) {
  if (foo) {
    Object.keys(foo).forEach(key => {
      console.log(foo[key as keyof Foo]);
    });
  }
}

方法4：自定义类型守卫缩小范围 #

通过类型守卫函数严格校验key是否属于Foo的属性，适合需要强类型检查的场景：

interface Foo {
  a: number;
  b: number;
}

function isFooKey(key: string): key is keyof Foo {
  return ['a', 'b'].includes(key);
}

function doSomething(foo?: Foo) {
  if (foo) {
    for (const key in foo) {
      if (isFooKey(key)) {
        console.log(foo[key]);
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者I like tech