使用泛型約束和keyof操作符動態訪問數組元素

我試圖在react中動態呈現一個表。通用屬性將確保動態索引數據數組的元素（至少我是這樣認為的）。我還希望只能將T類型的鍵傳遞給columns參數。因此，在這里擺脫泛型不是一種選擇。我還使用了Extract類型來分別渲染列，但排除它并沒有什么區別。

function Table<T, Key extends keyof T>({
  data,
  columns,
}: {
  data: T[];
  columns: Extract<Key, string>[];
  }) { 
  
  return (
    <div>
      {data.map((row) => (
        <tr>
          {columns.map((col) => (
            <td>{row[col]}</td> //this is where the error appears
          ))}
        </tr>
      ))}
    </div>
  );
}

這將產生以下錯誤：

Type 'T[Extract<Key, string>]' is not assignable to type 'ReactNode'.
  Type 'T[Extract<keyof T, string>]' is not assignable to type 'ReactNode'.
    Type 'T[string]' is not assignable to type 'ReactNode'.
      Type 'T[string]' is not assignable to type 'ReactPortal'.
        Type 'T[Extract<keyof T, string>]' is not assignable to type 'ReactPortal'.
          Type 'T[Extract<Key, string>]' is not assignable to type 'ReactPortal'.
            Type 'T[Extract<keyof T, string>]' is not assignable to type 'ReactPortal'.
              Type 'T[string]' is not assignable to type 'ReactPortal'.ts(2322)

為了隔離錯誤，我嘗試使用簡單的動態索引和通用約束再現錯誤：

function getKeyOfT<T, Key extends keyof T>(array: T[], key: Key) {
  return array[key];
}

生成以下錯誤：

Type 'keyof T' cannot be used to index type 'T[]'.ts(2536)

我已經研究了幾個答案，但它們似乎不同，它們的解決方案似乎沒有涵蓋我的問題：

• 類型“test”不能用于索引類型“T”
• 類型“K”不能用于索引類型“{[鍵在keyof K中]：V；}'.ts(2536）
• 類型“1”不可分配給類型“T[Extract<keyof T，string>]”

正如其中一些人所建議的那樣，斷言類型應該可以解決問題。然而，在這種情況下，這似乎是多余的：

function getElementOfArray<T, Key extends keyof T>(array: T[], key: Key) {
  return array[key as keyof T];
}