快捷導(dǎo)航

如何在TypeScript中正確的遍歷一個對象

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

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

JavaScript

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

// 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)會報錯.

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拿到的是對象的 key, 而在對象中所有的 key 都是字符串, 所以它無法分配給Person的name、address.

但是我們可以keyof來解決這個問題.

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

Object.keys

在使用Object.keys時, 我們可以使用as運算符來解決.

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

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

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

Object.entries

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

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

思考

以下是我自己的思考, 如有錯誤, 請指正

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

比如說:

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

print(obj2)
// 編譯時: ?, 因為它有name、address屬性
// 運行時: ?, 因為age字段是number, 沒有toUpperCase方法

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