TypeScript中遍历对象键的方法

前言

在日常的TypeScript开发中,经常需要遍历对象的键来执行各种操作。然而,使用Object.keys时可能会遇到一些类型相关的困扰,因为它返回的是一个字符串数组,而不是期望的键的联合类型。这可能导致在代码中引入一些不安全的类型转换。在本文中,我们将深入研究这个问题,并提供几种解决方案,以便在遍历对象键时更安全、更灵活地操作。

背景

使用Object.keys进行遍历并不能按照预期工作。这是因为Object.keys返回一个字符串数组,而不是包含所有键的联合类型。这是设计上的考虑,不会改变。

javascript 复制代码
function printUser(user: User) {
  Object.keys(user).forEach((key) => {
    // 不起作用!
    console.log(user[key]);
    // 报错:属性"key"在类型"User"上不存在。
  });
}

在适当的位置进行keyof typeof类型转换可以解决这个问题:

javascript 复制代码
const user = {
  name: "Daniel",
  age: 26,
};

const keys = Object.keys(user);

keys.forEach((key) => {
  // 不再报错!
  console.log(user[key as keyof typeof user]);
});

通过自定义类型断言,可以在行内缩小类型:

vbnet 复制代码
function isKey<T extends object>(
  x: T,
  k: PropertyKey
): k is keyof T {
  return k in x;
}

keys.forEach((key) => {
  if (isKey(user, key)) {
    console.log(user[key]);
    // key现在被缩小为 "name" | "age"
  }
});

Object.keys

问题在于使用Object.keys似乎无法按照期望的方式工作。这是因为它不会返回你需要的类型。

ini 复制代码
const user = {
  name: "Daniel",
  age: 26,
};

const keys = Object.keys(user);

// keys的类型是 string[]

这意味着你不能使用键来访问对象上的值:

ini 复制代码
const nameKey = keys[0];

user[nameKey];
// 报错:属性"nameKey"在类型"{ name: string; age: number; }"上不存在。

TypeScript之所以返回字符串数组,是因为它的对象类型是开放的。在许多情况下,TS无法保证由Object.keys返回的键实际上存在于对象上 - 因此将它们扩展为字符串是唯一合理的解决方案。

For...in循环

如果尝试使用for...in循环,同样会失败,原因是键被推断为字符串,就像Object.keys一样。

sql 复制代码
function printUser(user: User) {
  for (const key in user) {
    console.log(user[key]);
    // 报错:属性"key"在类型"User"上不存在。
  }
}

但在许多情况下,你可能确信自己完全了解对象的形状。

那么,怎么办呢?

解决方案1:转换为keyof typeof

第一种选择是使用keyof typeof将键转换为更具体的类型。

javascript 复制代码
const user = {
  name: "Daniel",
  age: 26,
};

const keys = Object.keys(user) as Array<keyof typeof user>;

keys.forEach((key) => {
  // 不再报错!
  console.log(user[key]);
});

在索引对象时也可以进行转换。

javascript 复制代码
const keys = Object.keys(user);

keys.forEach((key) => {
  console.log(user[key as keyof typeof user]);
});

然而,as在任何形式中通常是不安全的,这也不例外。

ini 复制代码
const user = {
  name: "Daniel",
  age: 26,
};

const nonExistentKey = "id" as keyof typeof user;

// 没有错误!
const value = user[nonExistentKey];
// as是一个强大的工具,它允许我们在类型上欺骗TypeScript。

解决方案2:类型断言

通过使用isKey助手,可以在索引之前检查键是否实际存在于对象中。

vbnet 复制代码
function isKey<T extends object>(
  x: T,
  k: PropertyKey
): k is keyof T {
  return k in x;
}

keys.forEach((key) => {
  if (isKey(user, key)) {
    console.log(user[key]);
    // key现在被缩小为 "name" | "age"
  }
});

解决方案3:泛型函数

再来看一个略微奇怪的解决方案。在泛型函数内部,使用in运算符将类型缩小到键。

php 复制代码
function printEachKey<T extends object>(obj: T) {
  for (const key in obj) {
    console.log(obj[key]);
    // key的类型被缩小为Extract<keyof T, string>
  }
}

// 每个键都被打印出来!
printEachKey({
  name: "Daniel",
  age: 26,
});

解决方案4:将Object.keys包装在函数中

另一种解决方案是将Object.keys包装在一个返回转换类型的函数中。

typescript 复制代码
const objectKeys = <T extends object>(obj: T) => {
  return Object.keys(obj) as Array<keyof T>;
};

const keys = objectKeys({
  name: "Daniel",
  age: 26,
});

console.log(keys);
// keys的类型是("name" | "age")[]

这可能是最容易被滥用的解决方案 - 将转换隐藏在函数中使其更有吸引力,可能导致人们在不考虑的情况下使用它。

结论

本文介绍了一些解决方案,从简单的类型转换到更智能的类型谓词,帮助我们更安全、更可靠地进行对象键的遍历。选择哪种方法取决于项目的需求和个人偏好,但总体而言,通过了解这些技术,我们可以更好地利用TypeScript的类型系统,提高代码的可维护性和安全性。

相关推荐
萌萌哒草头将军5 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫15 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中5 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊6 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿6 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj6 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝6 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3116 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion7 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜7 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf