快捷導(dǎo)航

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

更新時(shí)間：2022年03月28日 15:59:32 作者：你要不要喝奶茶

在TypeScript里面,也會(huì)遇到需要遍歷對(duì)象的時(shí)候,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript中正確的遍歷一個(gè)對(duì)象的相關(guān)資料,需要的朋友可以參考下

JavaScript

在講解用 Ts 遍歷一個(gè)對(duì)象之前, 我們先說(shuō)說(shuō) 在 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 中, 如果你直接這么用的話(huà), 發(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 }類(lèi)型
    console.log(key, obj[key].toUpperCase());
  }
}
print(obj)

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

但是我們可以keyof來(lái)解決這個(gè)問(wèn)題.

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)算符來(lái)解決.

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()來(lái)遍歷對(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)類(lèi)型的檢查, 即使我們使用keyof Person返回了 name | address, 但是我們不能肯定在運(yùn)行時(shí)它就是這兩個(gè)字段.

比如說(shuō):

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

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

然后我在 Github issue 里面找到這一句話(huà):