怎么在TypeScript中正確的遍歷一個(gè)對(duì)象

這篇文章主要介紹了怎么在TypeScript中正確的遍歷一個(gè)對(duì)象的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇怎么在TypeScript中正確的遍歷一個(gè)對(duì)象文章都會(huì)有所收獲，下面我們一起來看看吧。

JavaScript

在講解用 Ts 遍歷一個(gè)對(duì)象之前, 我們先說說 在 Js 中怎么實(shí)現(xiàn), for...in、Object.keys, 一個(gè)簡(jiǎn)單的例子:

// for...in
const obj = {
  name: 'itsuki',
  address: 'hangzhou',
};
for (const key in obj) {
  console.log(key, obj[key].toUpperCase());
}
// Object.keys
Object.keys(obj).forEach(key => {
  console.log(key, obj[key].toUpperCase());
});

// 輸出
// name ITSUKI
// address HANGZHOU

TypeScript

for...in

但是在 TypeScript 中, 如果你直接這么用的話, 發(fā)現(xiàn)會(huì)報(bào)錯(cuò).

type Person = {
  name: string;
  address: string;
};
const obj: Person = {
  name: 'itsuki',
  address: 'hangzhou',
};
function print(obj: Person) {
  for (const key in obj) {
    // ?
    // key:string 不能分配給 { name:string; age:number }類型
    console.log(key, obj[key].toUpperCase());
  }
}
print(obj)

我們知道for...in、Object.keys拿到的是對(duì)象的 key, 而在對(duì)象中所有的 key 都是字符串, 所以它無法分配給Person的name、address.

但是我們可以keyof來解決這個(gè)問題.

function print(obj:Person){
  let key: keyof Person;
  for (key in obj) {
    // ?
    console.log(key, obj[key].toUpperCase());
  }
}

Object.keys

在使用Object.keys時(shí), 我們可以使用as運(yùn)算符來解決.

function print(obj: Person) {
  Object.keys(obj).forEach((k) => {
    // ?
    console.log(k, obj[k as keyof Person].toUpperCase());
  });
}

我們可以把這個(gè)抽離出一個(gè)函數(shù):

function getKeys<T>(obj: T) {
  return Object.keys(obj) as Array<keyof T>;
}
getKeys(obj); // (keyof Person)[]

Object.entries

我們也可以使用Object.entries()來遍歷對(duì)象.

Object.entries(obj).forEach(([k, v]) => {
  console.log(k, v);
});

思考

以下是我自己的思考, 如有錯(cuò)誤, 請(qǐng)指正

我想Object.keys()返回的是一個(gè)string[], 是因?yàn)樗窃谶\(yùn)行時(shí)確定的, 我們知道TypeScript做的只是靜態(tài)類型的檢查, 即使我們使用keyof Person返回了 name | address, 但是我們不能肯定在運(yùn)行時(shí)它就是這兩個(gè)字段.

比如說:

const obj2 = {
  name: 'itsuki',
  address: 'hangzhou',
  age: 20,
};

print(obj2)
// 編譯時(shí): ?, 因?yàn)樗衝ame、address屬性
// 運(yùn)行時(shí): ?, 因?yàn)閍ge字段是number, 沒有toUpperCase方法

然后我在 Github issue 里面找到這一句話:

TS 中的類型是開放式的。因此, keysof 可能會(huì)少于在運(yùn)行時(shí)獲得的所有屬性。

它更要我明白了, 為什么keys()返回的是一個(gè)string[], 而不是一個(gè)(keyof Person)[].

關(guān)于“怎么在TypeScript中正確的遍歷一個(gè)對(duì)象”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“怎么在TypeScript中正確的遍歷一個(gè)對(duì)象”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。