TypeScript报错：类型上未找到string参数的索引签名如何解决

错误原因 #

Object.keys() 方法默认返回的是 string[] 类型的数组，而你定义的 MyType 只有固定的三个字面量键 'high' | 'low' | 'medium'，TS不允许用宽泛的string类型去索引只有明确有限键的类型，因此抛出了该错误。

解决方法 #

方案1：临时类型断言（最简单快捷） #

直接在使用item索引data时，把item断言为keyof MyType即可，修改代码如下：

{Object.keys(data)          
         .map((item: string, key: number) => {
            return (
              data &&
              data[item as keyof MyType]?.preview && (
                < component here >
              )
            );
          })}

如果确定data的键就是MyType的所有键，也可以直接对Object.keys的返回值做整体断言：

{(Object.keys(data) as Array<keyof MyType>)          
         .map((item, key) => {
            return (
              data[item]?.preview && (
                < component here >
              )
            );
          })}

方案2：封装类型安全的keys工具函数（可复用，推荐） #

如果你经常需要做这类遍历，可以封装一个泛型工具函数，让它直接返回对应类型的键数组，不需要每次手动断言：

// 全局通用的类型安全keys函数
function getObjectKeys<T extends object>(obj: T) {
  return Object.keys(obj) as Array<keyof T>
}

// 业务代码中使用
{getObjectKeys(data)          
         .map((item, key) => {
            return (
              data[item]?.preview && (
                < component here >
              )
            );
          })}

方案3：给MyType添加索引签名（非必要不推荐） #

如果你的业务场景中MyType确实需要支持任意字符串作为键，可以给类型添加索引签名，从根源解决索引报错，但该方案会放宽TS对MyType的类型校验，会丢失部分类型安全能力：

export type MyType = {
  [key: string]: {
    age: number;
    preview: [{ [key: string]: string | number }];
  };
  high: {
    age: number;
    preview: [{ [key: string]: string | number }];
  };
  low: {
    age: number;
    preview: [{ [key: string]: string | number }];
  };
  medium: {
    age: number;
    preview: [{ [key: string]: string | number }];
  };
};

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