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

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”。

它说：

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

谢谢

Answer 1

问题是由于 的键MyType只能有三个值：“medium”、“high”和“low”。

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

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

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

这应该有效。但是 TS withObject.keys()没有返回键数组，但仍然返回字符串数组。这个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 >
              )
            );
          })}

游乐场链接