如何在TypeScript中正确的遍历一个对象

目录

• JavaScript
• TypeScript
• for...in
• Object.keys
• Object.entries
• 思考
• 总结

JavaScript

在讲解用 Ts 遍历一个对象之前, 我们先说说 在 Js 中怎么实现, 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 中, 如果你直接这么用的话, 发现会报错.

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());
  });
}

我们可以把这个抽离出一个函数:

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做的只是静态类型的检查, 即使我们使用keyof Person返回了 name | address, 但是我们不能肯定在运行时它就是这两个字段.

比如说:

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

print(obj2)
// 编译时: ✅, 因为它有name、address属性
// 运行时: ❌, 因为age字段是number, 没有toUpperCase方法

然后我在 Github issue 里面找到这一句话:

TS 中的类型是开放式的。因此, keysof 可能会少于在运行时获得的所有属性。

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

总结

到此这篇关于如何在TypeScript中正确的遍历一个对象的文章就介绍到这了,更多相关Ts遍历对象内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！