使用泛型類型對 function 進行排序

Question

我正在為對象數組編寫一個排序 function 。 function 參數是一個對象數組和鍵。 我是 typescript 的新手，但我正在嘗試使類型通用。

但是我收到了這個錯誤 -元素隱式具有“任何”類型，因為“字符串”類型的表達式不能用於索引類型“未知”。 在“未知”類型上找不到具有“字符串”類型參數的索引簽名。

    58 |         sortedData.sort((a, b) => {
    59 |           if (
  > 60 |             stringToDate(a[sortConfig.columnKey]).getTime() >
       |                          ^
    61 |             stringToDate(b[sortConfig.columnKey]).getTime()
    62 |           ) {
    63 |             return sortConfig.direction === "asc" ? -1 : 1;

這是 function：

function sortFunction<T>(data: T[], sortConfig: SortConfig | null): T[] {
  const sortedData = [...data];
  switch (sortConfig != null && sortConfig.columnKey) {
    case "paidUntilDate":
    case "startDate":
    case "accountEndingDate":
      if (sortConfig != null) {
        sortedData.sort((a, b) => {
          if (
            stringToDate(a[sortConfig.columnKey]).getTime() >
            stringToDate(b[sortConfig.columnKey]).getTime()
          ) {
            return sortConfig.direction === "asc" ? -1 : 1;
          }

          if (
            stringToDate(a[sortConfig.columnKey]).getTime() <
            stringToDate(b[sortConfig.columnKey]).getTime()
          ) {
            return sortConfig.direction === "asc" ? 1 : -1;
          }

          return 0;
        });
      }
      break;
    default:
      if (sortConfig != null) {
        sortedData.sort((a, b) => {
          if (a[sortConfig.columnKey] > b[sortConfig.columnKey]) {
            return sortConfig.direction === "asc" ? -1 : 1;
          }
          if (a[sortConfig.columnKey] < b[sortConfig.columnKey]) {
            return sortConfig!.direction === "asc" ? 1 : -1;
          }

          return 0;
        });
      }
  }
  return sorted data;
}

排序配置是：

export interface SortConfig {
  columnKey: string;
  direction: Order_Table_Hook;
}

Order_Table_Hook 是：

export type Order_Table_Hook = "asc" | "desc" | undefined;

字符串到日期：

export function stringToDate(dateString: DateAsString): Date {
  return new Date(dateString);
}

Answer 1

基本理念

排序回調 function 中的a和b的類型將為T

並且a[sortConfig.columnKey]應該得到一個DateAsString類型，以便被stringToDate function 接受。

讓我們試試這是否可行，用{[k:string]: DateAsString}擴展T

function sortFunction<T extends {[k: string]: DateAsString}>(data: T[], sortConfig: SortConfig | null): T[] 

這通過了我的默認tsconfig.json的檢查

更多類型

例如，如果您想為MyDataObject類型支持DateAsString 、 number 、 boolean ，您可以將其定義為：

export type MyDataObject = {
  [k: string]: DateAsString | number | boolean;
};

並將as DateAsString詞綴添加到a[sortConfig.columnKey]

if(
  stringToDate(a[sortConfig.columnKey] as DateAsString).getTime() >
  stringToDate(b[sortConfig.columnKey] as DateAsString).getTime()
){
  return sortConfig.direction === "asc" ? -1 : 1;
}

最一般

如果您可以確保paidUntilDate 、 startDate 、 accountEndingDate的值的數據類型不是其他的而是DateAsString ，那么您可以這樣做：

export type MyDataObject = {
  [k: string]: any
};