javascript - 在 TypeScript 中遍歷物件的鍵和值

在純 JavaScript 中，我們可以這樣迭代物件的屬性和值：

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

你可以在一些 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 參數的索引使用