TypeScript 映射对象键和值：元素隐式具有“任意”类型

Question

我正在尝试迭代对象键和值，但 TypeScript 对我喊道：

元素隐式具有any类型，因为类型string不能用于索引类型{ name: string; surname: string; gender: string; }

我究竟做错了什么？

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

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

这是错误的屏幕截图：

Answer 1

错误

元素隐式具有any类型，因为 type 的表达式string不能用于索引 type {name: string; surname: string; gender: string; }。在类型上找不到

带有类型参数的索引签名string...

解决方案 1：将对象定义为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：将对象定义为可索引类型

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.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：对对象使用类型转换来指示可索引性

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]}`);
}

Answer 2

只需将从 Object.keys 返回的字符串转换为 Data 对象的键即可。

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

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

游乐场链接