TypeScript map 對象的鍵和值

Question

我正在嘗試迭代對象的鍵和值，但 TypeScript 對我大喊大叫。 我究竟做錯了什么？

const DATA = {
  name: "John",
  surname: "Smith",
  gender: "Male"
}

const result = Object.keys(DATA).map((d: string) => `${d} - ${DATA[d]}`)

我在下面收到 TS 錯誤

我究竟做錯了什么？

Answer 1

只需將從 Object.keys 返回的字符串轉換為數據 object 的鍵。

const DATA = {
  name: "John",
  surname: "Smith",
  gender: "Male"
}

const result = Object.keys(DATA).map((d: string) => `${d} - ${DATA[d as keyof typeof DATA]}`)

游樂場鏈接

Answer 2

你需要告訴 typescript 你的 object 的鍵是字符串類型的。

const DATA: {[key: string]: string} = {
  name: "John",
  surname: "Smith",
  gender: "Male"
}

const result = Object.keys(DATA).map((d: string) => `${d} - ${DATA[d]}`)

Answer 3

Object 的鍵本身沒有明確地鍵入為字符串。

當你這樣做

Object.keys(DATA)

您將姓名、姓氏、性別作為值傳遞給 map，而不是 John、Smith、Male。

要鍵入密鑰，您需要像這樣鍵入 object：

type DataType = {[key:string]: string }
const DATA:DataType = 
{
 name: "John",
 surname: "Smith",
 gender: "Male"
}

Answer 4

錯誤

元素隱式具有any類型，因為string類型的表達式不能用於索引類型{name: string; surname: string; gender: string; } {name: string; surname: string; gender: string; } {name: string; surname: string; gender: string; } 。

在類型...上找不到帶有string類型參數的索引簽名

解決方案 1：將 object 定義為Record類型

const DataRecord: Record<string, string> = {
  name: "Johnny-come-lately",
  surname: "Smithers",
  gender: "Male"
}

for (const key of Object.keys(DataRecord)) {
  console.log(`${key}: ${DataRecord[key]}`);
}

解決方案 2：將 object 定義為可轉位類型

const DataIndexableType: {[key: string]: string} = {
  name: "Johnny-come-lately",
  surname: "Smithers",
  gender: "Male"
}

for (const key of Object.keys(DataIndexableType)) {
  console.log(`${key}: ${DataIndexableType[key]}`);
}

解決方案 3：使用Object.entries()

如果由於某種原因為 object 添加類型信息不切實際，則可以在不使用類型轉換的情況下使用Object.entries() 。

const DATA = {
  name: "John",
  surname: "Smith",
  gender: "Male"
}

// Object.entries
for (const [key, value] of Object.entries(DATA)) {
    console.log(`${key}: ${value}`);
}

// Or Object.entries.map
Object.entries(DATA).map( ([key, value]) => console.log(`${key}: ${value}`));

解決方案 4：在鍵上使用類型轉換

const DATA = {
  name: "John",
  surname: "Smith",
  gender: "Male"
}

// Object.keys with typecast on key.
for (const key of Object.keys(DATA)) {
  console.log(`${key}: ${DATA[key as keyof typeof DATA]}`);
}

解決方案 5：在 object 上使用類型轉換來指示可索引性

const DATA = {
  name: "John",
  surname: "Smith",
  gender: "Male"
}

// Object.keys with typecast on object.
for (const key of Object.keys(DATA)) {
  console.log(`${key}: ${(DATA as {[key: string]: string})[key]}`);
}