TypeScript遍历对象报错string无法索引StartItems类型如何解决

• TypeScript 中for...in循环遍历对象得到的key默认推导为string类型，你定义的StartItems接口仅明确声明了item1~item6六个固定属性，没有定义通用的字符串索引签名，因此TS无法确认string类型的key是StartItems的合法属性，就抛出了索引类型错误。
• 你尝试的key instanceof StartItems写法本身是无效的：TS的接口仅存在于编译阶段，运行时会被完全抹除，instanceof是JS原生的运行时判断操作，无法对编译期的类型生效。
• 你遇到的「有TS报错但编译后输出正常」的情况是符合预期的：TS的静态类型检查错误不会阻断JS代码生成，只要运行时key确实是item1~item6中的值，代码就能正常执行。

下面提供三种常用的修复方式，可根据场景选择：

方案1：类型断言（最简便） #

适合你明确遍历的对象是纯StartItems实例、没有额外自定义属性的场景，直接告诉TS当前key是StartItems的合法键即可：

for (const key in heroStartItems[GameSettings.heroId]) {
  // 新增类型断言
  const itemKey = key as keyof StartItems;
  const div = document.createElement('div');
  div.classList.add(key);
  // 用断言后的itemKey访问属性
  console.log(heroStartItems[GameSettings.heroId][itemKey]);
  heroItems.appendChild(div);
}

keyof StartItems会自动生成'item1' | 'item2' | 'item3' | 'item4' | 'item5' | 'item6'的联合类型，TS会认可该类型为合法的索引值。

方案2：给接口加索引签名 #

适合后续可能扩展StartItems的属性、不想每次遍历都写断言的场景：

interface StartItems {
  item1: number | null;
  item2: number | null;
  item3: number | null;
  item4: number | null;
  item5: number | null;
  item6: number | null;
  // 新增字符串索引签名
  [key: string]: number | null;
}

修改接口后原有循环代码不需要任何改动，TS就会允许用string类型的key索引StartItems类型的对象。

方案3：自定义类型守卫（最严谨） #

如果想要严格保证类型安全，避免因意外属性导致的运行时问题，可以加自定义类型守卫做校验：

// 先定义类型守卫函数
function isStartItemKey(key: string): key is keyof StartItems {
  return ['item1', 'item2', 'item3', 'item4', 'item5', 'item6'].includes(key);
}

// 循环内做校验
for (const key in heroStartItems[GameSettings.heroId]) {
  if (isStartItemKey(key)) {
    const div = document.createElement('div');
    div.classList.add(key);
    console.log(heroStartItems[GameSettings.heroId][key]);
    heroItems.appendChild(div);
  }
}

该写法会在编译和运行时都做校验，就算遍历的对象上有额外的非预期属性，也会被过滤掉，不会出现类型或运行时错误。

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