打字稿错误在类型上找不到带有“字符串”类型参数的索引签名

Question

我对 TS 很陌生...我有这种特殊的类型：

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

我通过我的数据对象键映射：

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

数据类型正确，但 TS 报错“data[item]?.preview”。

上面写着：

元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“MyType”。 在“MyType”类型上找不到带有“string”类型参数的索引签名。

谢谢

Answer 1

问题是因为MyType的键只能有三个值：“中”、“高”和“低”。

但是您的项目是string 类型，并且可以包含任何字符串。 TS 抱怨。

现在你会认为你可以添加类似的东西

objKeys.map((item: keyof MyType, key: number) => {

这应该有效。 但是带有Object.keys() 的TS 没有返回一个键数组，而是一个字符串数组。 Github 线程表明这在未来不会改变。

因此，一种方法是添加一个中间步骤并使用 as 关键字对其进行类型转换：

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

Playground Link