如何為具有通用鍵的字典定義 typescript 類型？

Question

在嘗試 map 數據鍵時，我遇到了幾個 Typescript 錯誤，我不明白為什么。 作為我的 API 和 object 的回復，我返回了通用密鑰，如下所示：

{
  1: { 
      name: 'test1',
      country: 'test1',
  },
  2: {
       name: 'test2',
      country: 'test2',
  }
  ....generic amount of keys
}

我為此定義了以下 typescript 類型：

export type Users<T> = {
  [K in keyof T]: {
    name: string;
    country: string;
  };
};

當我嘗試在我的組件中輸入 object 的鍵上使用 map 時，我收到了來自 typescript 的錯誤：

Object.keys(data).map((key) => {
  <p>{data[key].name}</p>
})

Object.keys(data) 行出錯：

常量數據：用戶 | undefined 沒有重載匹配此調用。
重載 1 of 2，'(o: {}): string[]'，出現以下錯誤。 '用戶 | 類型的參數 undefined' 不可分配給 '{}' 類型的參數。 類型“undefined”不可分配給類型“{}”。 重載 2 of 2，'(o: object): string[]'，出現以下錯誤。 '用戶 | 類型的參數 undefined' 不能賦值給 'object' 類型的參數。 類型“undefined”不可分配給類型“object”。ts(2769) 沒有可用的快速修復

數據 [key].name 出錯：

Object 可能是“未定義的”。

Answer 1

來自 TSConfig 參考noUncheckedIndexedAccess ：

TypeScript 有一種方法可以通過索引簽名來描述 object 上具有未知鍵但已知值的對象。

打開noUncheckedIndexedAccess會將undefined添加到類型中任何未聲明的字段。

您可以使用非空斷言運算符（后綴! ）通知編譯器該值確實存在。 這是一個例子：

TS游樂場

import {default as React} from 'react';

type User = {
  name: string;
  country: string;
}

const data: Record<string, User> = {
  1: { 
    name: 'test1',
    country: 'test1',
  },
  2: {
    name: 'test2',
    country: 'test2',
  },
  // ....generic amount of keys
};

Object.keys(data).map(key => (<p>{data[key]!.name}</p>));
//                                         ^
// The non-null assertion operator will assert
// to the compiler that the value exists