在 TypeScript 中迭代对象的键和值

Question

在纯 JavaScript 中，我们可以迭代对象属性和值，如下所示：

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

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

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

是否有其他方法不使用 Map<string, T> 来执行此操作并获取每个键的值？

我在使用 React 和 TS 构建应用程序时遇到了这个问题，并且我的状态有一个对象，我需要执行如下操作：

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

Answer 1

您可以在操作员的帮助下轻松使用它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>”，因为[这样做通常并不安全](/sf/ask/3850852211/不对象键返回打字稿中类型的键） (2认同)

Answer 2

`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()可以不使用map()如下：

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

Answer 3

用于Object.entries迭代键和值：

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