在 TypeScript 中遍历对象键可能会是一场噩梦。以下是我所知的所有解决方案。
简单概念
使用 Object.keys 进行迭代不起作用，因为Object.keys返回的是一个字符串数组，而不是所有键的联合。这是设计上的，不会改变。
function printUser(user: User) {
Object.keys(user).forEach((key) => {
// 不起作用！
console.log(user[key]);
// 出错信息如下：
// Expression implicitly has an 'any' type because expression of type 'string' can't be used to index type 'User'.
// No index signature with a parameter of type 'string' was found on type 'User'.
});
}
在正确的位置转换为keyof typeof可以使其正常工作：
const user = {
name: "Daniel",
age: 26,
};
const keys = Object.keys(user);
keys.forEach((key) => {
console.log(user[key as keyof typeof user]);
});
自定义类型谓词也可以通过内联方式起作用。
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]);
}
});
更详细的解释
Object.keys
问题在于：使用 Object.keys似乎不会按照你的预期工作。这是因为它没有返回你需要的类型。
它并不是一个包含所有键的类型，而是将其扩展为字符串数组。
const user = {
name: "Daniel",
age: 26,
};
const keys = Object.keys(user);
const keys: string[]
这意味着你无法使用键来访问对象上的值：
const nameKey = keys[0];
const nameKey: string
user[nameKey];
// 出错信息如下：
// Expression implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ name: string; age: number; }'.
// No index signature with a parameter of type 'string' was found on type '{ name: string; age: number; }'.
TypeScript 在这里返回字符串数组是有充分理由的。TypeScript 对象类型是开放式的。
有许多情况下，TS 无法保证 Object.keys 返回的键实际上在对象上 - 所以将它们扩展为字符串是唯一合理的解决方案。详细信息请参阅此问题。
for...in 循环
如果你尝试使用for...in 循环，你也会发现它会失败。这是因为相同的原因 - key 被推断为字符串，就像 Object.keys一样。
function printUser(user: User) {
for (const key in user) {
console.log(user[key]);
// 出错信息如下：
// Expression implicitly has an 'any' type because expression of type 'string' can't be used to index type 'User'.
// No index signature with a parameter of type 'string' was found on type 'User'.
}
}
但对于许多情况，你可能会有信心确切地知道对象的形状。
那么，你该怎么做呢？
解决方案 1: 转换为 keyof typeof
第一个选项是使用 keyof typeof 将键转换为更具体的类型。
在下面的示例中，我们将 Object.keys 的结果转换为包含这些键的数组。
const user = {
name: "Daniel",
age: 26,
};
const keys = Object.keys(user) as Array<keyof typeof user>;
keys.forEach((key) => {
// 不再有错误！
console.log(user[key]);
});
我们也可以在索引对象时执行转换。
在这里，key 仍然被类型化为字符串 - 但在我们索引 user 时，我们将其转换为 keyof typeof user。
const keys = Object.keys(user);
keys.forEach((key) => {
console.log(user[key as keyof typeof user]);
});
然而，在任何形式上使用 as 通常是不安全的 - 这也不例外。
const user = {
name: "Daniel",
age: 26,
};
const nonExistentKey = "id" as keyof typeof user;
// 没有错误！
const value = user[nonExistentKey];
在这种情况下，as 是一个相当强大的工具 - 如你所见，它让我们对 TypeScript关于某些事物的类型进行欺骗。
解决方案 2: 类型判断
让我们看一些更智能、可能更安全的解决方案。使用类型谓词怎么样？
通过使用 isKey 辅助函数，我们可以在索引对象之前检查键是否确实在对象上。
通过在 isKey 的返回类型中使用 is 语法，我们让 TypeScript 正确地推断。
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]);
}
});
这个很棒的解决方案来自于 Stefan Baumgartner 在这个主题上的博文。
解决方案 3: 泛型函数
让我们看一个稍微奇怪一些的解决方案。在泛型函数内部，使用 in 运算符将会缩小到键的类型。
我实际上不确定为什么这个版本可以工作而非泛型版本不行。
function printEachKey<T extends object>(obj: T) {
for (const key in obj) {
console.log(obj[key]);
}
}
// 每个键都会被打印出来！
printEachKey({
name: "Daniel",
age: 26,
});
解决方案 4: 将 Object.keys封装在函数中
另一个解决方案是将 Object.keys 封装在一个返回转换类型的函数中。
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);
这可能是最容易被误用的解决方案 - 将转换隐藏在函数内部使其更具吸引力，可能会导致人们在不加思考的情况下使用它。
结论
我的首选解决方案？通常情况下，转换完全可以胜任。它简单易懂 - 通常足够安全。
但如果你喜欢类型谓词或泛型解决方案，那就去试试吧。isKey 函数看起来足够有用。
网友评论