怎么在TypeScript中正确的遍历一个对象

这篇文章主要介绍了怎么在TypeScript中正确的遍历一个对象的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么在TypeScript中正确的遍历一个对象文章都会有所收获，下面我们一起来看看吧。

JavaScript

在讲解用 Ts 遍历一个对象之前, 我们先说说 在 Js 中怎么实现, for...in、Object.keys, 一个简单的例子:

// for...inconst obj = {  name: 'itsuki',  address: 'hangzhou',};for (const key in obj) {  console.log(key, obj[key].toUpperCase());}// Object.keysObject.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(obj: T) {  return Object.keys(obj) as Array;}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中正确的遍历一个对象"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"怎么在TypeScript中正确的遍历一个对象"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。