// 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 里面找到這一句話: