【问题标题】：Iterate over object's keys and values in TypeScript在 TypeScript 中迭代对象的键和值
【发布时间】：2021-03-30 04:05:27
【问题描述】：

在纯 JavaScript 中，我们可以像这样迭代对象的 props 和值：

const values = Object.keys(obj).map(key => obj[key]);

在 TypeScript 中，此语法是错误的，因为 TS 编译器显示以下消息：

“元素隐含地具有 'any' 类型，因为 'string' 类型的表达式不能用于索引类型 Object”。

是否有另一种方法不使用 Map 来执行此操作并获取每个键的值？我在使用 React 和 TS 构建应用程序时遇到了这个问题，并且在我的状态下我有一个对象，我需要这样做：

const stateJSX: HTMLParagraphElement[] = Object.keys(obj).map(key => <p>`${key}: ${obj[key]}`<p>);

我想看看其他人的方法和想法 :) 谢谢。

【问题讨论】：

【解决方案1】：

使用Object.entries 遍历键和值：

Object.entries(obj).map(([key, value]) => `${key}: ${value}`)

【讨论】：

【解决方案2】：

使用Object.entries

Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`))

【讨论】：

【解决方案3】：

您可以在keyof 运算符的帮助下轻松使用它：

const test = <T extends Record<string, unknown>>(obj: T) => {
 return (Object.keys(obj) as Array<keyof T>).map(key => obj[key])
}

您应该确保 TS，key 变量可以用作obj 参数的索引

【讨论】：

您可能需要注意Object.keys() 不会自动返回Array<keyof T>，因为it is not generally safe to do so
@jcalz ，是的，你是对的。我已经阅读了相关的 github 问题。最好与不可变对象一起使用。顺便说一句，你现在是用 TS 使用 Object.keys 的更好方法吗？我知道，我们可以在 map 函数中使用 typeguards 来做到这一点，但我认为这有点开销

【解决方案4】：

`Object.keys()`

要使用Object.keys()，（如原始问题所示），您可以添加一个类型转换，指示该对象是可索引类型：

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

或者在key 上使用类型转换：

for (const key of Object.keys(obj)) {
  console.log(`${key}: ${obj[key as keyof typeof obj]}`);
}

`Object.entries()`

Object.entries() 可以不使用map()，如下所示：

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

【讨论】：