元素隐式具有 'any' 类型，因为类型 'string' 的表达式不能用于索引类型 'ProductMapData'

Question

我有 sortDynamic 函数，我试图像这样对数据进行动态排序：

 const sortDynamic = (key: string, order: string) => {
    const sortOrder = order === 'asc' ? 1 : -1;
    return (a: ProductMapData, b: ProductMapData) => {
       const A = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];
       const B = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];
       if (A < B) {
          return sortOrder * -1;
       } else if (A > B) {
          return sortOrder * 1;
       } else {
          return 0;
       }
    };
 };

其中 ProductMapData 是一个如下所示的界面：

interface ProductMapData {
  advanceRevenue: number;
  advanceTickets: number;
  changeInPeriodRevenue: number;
  changeInPeriodTickets: number;
  currency: string;
  entityRef: string;
  eopAdvanceRevenue: number;
  eopAdvanceTickets: number;
  hallLabel: string;
  occurredAt: string | undefined;
  playedOffRevenue: number;
  playedOffTickets: number;
  relatedEventName: string;
  thumbnail: string;
  timeBegins: string;
  timedBeginsBegins: string;
  soldTickets: number;
  soldRevenue: number;
}

并在此处调用函数：

productMapData.sort(sortDynamic('soldTickets', 'asc'));

一切似乎都很好，但我遇到了这个错误 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ProductMapData'. No index signature with a parameter of type 'string' was found on type 'ProductMapData'.ts(7053) a[key] 和 b[key]。我不知道我做错了什么。任何帮助将不胜感激。

Answer 1

将您的 ProductMapData 接口扩展到其他对 Key 类型有严格要求的接口。该值可以是任何类型，您也可以指定值的类型。

下面是为您提供的 ProductMapData 的严格接口。您可以为值添加更多类型。

interface IObjectKeys {
  [key: string]: string | number | undefined;
}

现在您只需将 ProductMapData 接口扩展到 IObjectKeys。

interface ProductMapData extends IObjectKeys

这将告诉您的实例您的对象只有字符串类型的键。

播放Playground Link

元素隐式具有 'any' 类型，因为类型 'string' 的表达式不能用于索引类型 'ProductMapData'

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ProductMapData'

typescript

react-typescript