在 TypeScript 中迭代对象的键和值

Posted 2023-03-27

【中文标题】在 TypeScript 中迭代对象的键和值

【英文标题】：Iterate over object's keys and values in 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`))

【讨论】：

这个答案真的很接近this和this

【参考方案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`);