React+TypeScript数组处理类型不匹配 遍历ISearch属性报隐式any类型错误

这个报错是TypeScript静态类型检查的正常拦截行为：

• 你定义的items数组会被TS自动推导为宽泛的string[]类型，遍历得到的变量i是任意string类型
• ISearch接口没有定义通用字符串索引签名，TS不允许用任意字符串去索引该类型的对象，因为无法校验这个字符串对应的属性是否存在、返回值类型是否合法
• 额外需要注意：原接口定义里test: string后面跟的是全角中文分号，属于语法错误，需要替换为半角分号才能正常编译

核心思路是缩小索引变量的类型范围，让TS明确知道你用来索引save对象的字符串，都是ISearch上存在的、带query字段的合法属性，完整可运行的代码如下：

interface ISearch {
  test: string;
  sampleQuery: { id: number; query: string };
  dammyQuery: { id: number; query: string };
  foodQuery: { id: number; query: string };
  groupQuery: { id: number; query: string };
}

const searchText = (save: ISearch) => {
  // 显式声明items的元素类型：仅允许是ISearch中4个Query类的属性键
  const items: Array<keyof Pick<ISearch, 'sampleQuery' | 'dammyQuery' | 'foodQuery' | 'groupQuery'>> = ['sampleQuery', 'dammyQuery', 'foodQuery', 'groupQuery'];

  // 写items时也可以用as const简化标注，让TS自动推导为固定字面量元组
  // const items = ['sampleQuery', 'dammyQuery', 'foodQuery', 'groupQuery'] as const;

  let text = '';

  // 用forEach替代map做遍历拼接的副作用，更符合代码语义
  items.forEach((itemKey) => {
    const targetProp = save[itemKey];
    // 加类型守卫，防止访问到无query字段的属性
    if ('query' in targetProp && targetProp.query !== '') {
      text = text.concat(`${targetProp.query},`);
    }
  });
  return text;
};

如果不想做精细类型约束，强行给ISearch加通用字符串索引签名，虽然能快速消掉报错，但会完全丢失TS对接口属性的类型校验能力，相当于放弃了静态检查的优势，仅在需要兼容老旧代码的特殊场景可以考虑：

interface ISearch {
  [key: string]: any; // 宽泛的索引签名，会让所有属性的类型检查失效
  test: string;
  // ... 其余属性定义
}

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