在 TypeScript 中将枚举转换为对象数组
将枚举转换为对象数组:
-
使用
Object.keys()
方法获取枚举键的数组。 - 过滤掉数字枚举的不必要值。
-
使用
map()
方法迭代数组,每次迭代返回一个对象。
// ✅ For NUMERIC Enums
enum NumericEnum {
Small,
Medium,
Large,
}
const arr1 = Object.keys(NumericEnum)
.filter((v) => isNaN(Number(v)))
.map((name) => {
return {
id: NumericEnum[name as keyof typeof NumericEnum],
name,
};
});
// 👇️ [{id: 0, name: 'Small'}, {id: 1, name: 'Medium'}, {id: 2, name: 'Large'}]
console.log(arr1);
// ✅ For STRING Enums
enum StringEnum {
Small = 'S',
Medium = 'M',
Large = 'L',
}
const arr2 = Object.keys(StringEnum).map((name) => {
return {
name,
value: StringEnum[name as keyof typeof StringEnum],
};
});
// 👇️ [{name: 'Small', value: 'S'}, {name: 'Medium', value: 'M'}, {name: 'Large', value: 'L'}]
console.log(arr2);
代码片段显示了如何将数字和字符串枚举转换为对象数组。
TypeScript 中的枚举是真实的对象,存在于运行时,因此我们可以使用 Object.keys
方法来获取枚举的键数组。
// ✅ For NUMERIC Enums
enum NumericEnum {
Small,
Medium,
Large,
}
// 👇️ ['0', '1', '2', 'Small', 'Medium', 'Large']
console.log(Object.keys(NumericEnum));
// ✅ For STRING Enums
enum StringEnum {
Small = 'S',
Medium = 'M',
Large = 'L',
}
// 👇️ ['Small', 'Medium', 'Large']
console.log(Object.keys(StringEnum));
数字枚举的输出包括值,因此我们必须使用
filter()
方法从数组中过滤掉任何不需要的值。
最后一步是使用 Array.map 方法遍历枚举名称数组,并在每次迭代时返回一个包含名称和值的对象。
我们在示例中使用
keyof typeof
将字符串转换为枚举,因此我们可以访问相应的值。
如果我们需要一个包含名称或字符串枚举值的数组,我们可以使用 Object.keys()
和 Object.values()
方法。
// ✅ For STRING Enums
enum StringEnum {
Small = 'S',
Medium = 'M',
Large = 'L',
}
const keys2 = Object.keys(StringEnum);
// 👇️ ['Small', 'Medium', 'Large']
console.log(keys2);
const values2 = Object.values(StringEnum);
// 👇️ ['S', 'M', 'L']
console.log(values2);
数字枚举的方法类似,但由于 Object.keys()
方法返回键和值,我们必须过滤掉不需要的值。
// ✅ For NUMERIC Enums
enum NumericEnum {
Small,
Medium,
Large,
}
const names1 = Object.keys(NumericEnum).filter((v) => isNaN(Number(v)));
console.log(names1); // 👉️ ['Small', 'Medium', 'Large']
const values1 = Object.values(NumericEnum).filter((v) => !isNaN(Number(v)));
console.log(values1); // 👉️ [0, 1, 2]
相关文章
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 Angular 中使用 TypeScript 的 getElementById 替换
发布时间:2023/04/14 浏览次数:153 分类:Angular
-
本教程指南提供了有关使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。这也提供了在 Angular 中 getElementById 的最佳方法。
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:181 分类:TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:97 分类:TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间:2023/03/19 浏览次数:172 分类:TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:161 分类:TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间:2023/03/19 浏览次数:182 分类:TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:221 分类:TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间:2023/03/19 浏览次数:110 分类:TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。