地图 TypeScript 枚举

30 浏览
0 Comments

地图 TypeScript 枚举

如何将一个 TypeScript 枚举映射到数组？例如，对于字符串，你可以这样做：

let arr = [ 'Hello', 'Goodbye' ];
arr.map(v => {
  if (v === 'Hello') {
    return ':)';
  } else if (v === 'Goodbye') {
    return ':(';
  }
}); // [ ':)', ':(' ]

当然，这种方法对于枚举不起作用：

enum MyEnum { Hello, Goodbye };
MyEnum.map(v => {
  if (v === MyEnum.Hello) {
    return ':)';
  } else if (v === MyEnum.Goodbye) {
    return ':(';
  }
}); // 不起作用

理想情况下，我希望以一种通用的方式来实现这个功能，这样我就可以简单地将任何枚举传递给一个 map 函数，同时保留类型信息。用法可能如下所示：

map(MyEnum, v => {
  if (v === MyEnum.Hello) {
    return ':)';
  } else if (v === MyEnum.Goodbye) {
    return ':(';
  }
}); // [ ':)', ':(' ]

我一直在尝试编写一个能够为我完成这个任务的函数，但是在泛型方面一直遇到问题。

0

3 答案

0 Comments

问题的原因是在使用TypeScript中的枚举类型时，想要将枚举映射为其他形式的数据结构，如数组或对象。然而，直接使用Object.keys()方法获取枚举的键时会存在一些问题，需要进行一些额外的处理。

解决方法是通过将Object.keys()方法返回的结果进行类型断言，然后使用.map()方法进行映射操作。具体代码如下：

(Object.keys(MyEnum) as Array).map((key) => {})

如果需要将枚举的键作为数组返回，可以使用.filter()方法来过滤非数字的键。具体代码如下：

Object.keys(MyEnum).filter((el) => { return isNaN(Number(el)) })

如果想要更好的类型检查，可以使用类型断言将Object.keys()方法的返回结果转换为枚举类型的数组。具体代码如下：

(Object.keys(MyEnum) as Array)

通过以上的方法，可以解决在TypeScript中将枚举映射为其他数据结构的问题。

0
0 Comments

在使用TypeScript中，我们经常会遇到需要将枚举类型转换为映射的需求。然而，在TypeScript中，直接使用枚举类型作为参数是不被允许的。为了解决这个问题，我们可以通过以下方法来实现枚举类型到映射的转换。

我们首先定义一个类型EnumType，它是一个数字到字符串的映射。然后，我们定义了一个mapEnum函数，它接受一个enumerable参数和一个fn函数。在函数体内，我们通过Object.keys(enumerable)获取枚举类型的所有键，并通过map方法将这些键转换为枚举类型的成员。接着，我们使用filter方法筛选出数字类型的枚举值，并通过map方法将这些枚举值传给fn函数进行处理，最后返回处理后的结果。

使用这个函数也很简单，我们只需要将枚举类型和处理函数作为参数传给mapEnum函数即可。在上述示例中，我们定义了一个MyEnum枚举类型，并将其作为参数传给mapEnum函数。在处理函数中，我们通过判断枚举值来返回不同的结果。最后，我们将处理结果打印出来，得到了[ ':)', ':(' ]。

至于为什么需要筛选出数字类型的枚举值，这是因为在TypeScript中，枚举类型实际上被编译成了一个对象，其中包含了每个成员的键值对。在编译后的代码中，枚举值被赋予了对应的数字，而我们在运行时只关心这些数字值。因此，我们需要通过筛选，将枚举类型中的数字值提取出来进行处理。

另外，在函数签名中的type语句是为了解决无法将枚举类型作为参数类型的问题。在这里，我们通过显式声明EnumType类型来规定函数参数的类型。

总结起来，通过以上的方法，我们可以很方便地将枚举类型转换为映射，并对每个枚举值进行处理。然而，需要注意的是，目前在TypeScript中无法完全保留类型信息。希望在未来的版本中，能够通过引入泛型来解决这个问题。

0
0 Comments

在Typescript中，使用映射（Mapping）可以极大地简化代码编写。最近我一直在使用键值（key value）枚举映射，并且我推荐使用！以下是一些示例：

基本的枚举使用

enum InlineStyle {
   "Bold",
   "Italic",
   "Underline"
}
type IS = keyof typeof InlineStyle
// 循环的示例
(Object.keys(InlineStyle) as Array).forEach((key) => {
  // 在这里写代码
})
// 调用函数的示例
const styleInline = (style: IS) => {
  // 在这里写代码
}

枚举键值使用

enum ListStyle {
  "UL" = "List",
  "OL" = "Bullet points"
}
// 循环的示例
Object.entries(ListStyle).forEach(([key, value]) => {
  // 在这里写代码
})

接口映射

enum InlineStyle {
   "Bold" = "isBold",
   "Italic" = "isItalic",
   "Underline" = "isUnderlined"
}
type InlineStyleType = Record
enum ListStyle {
  "UL",
  "OL"
}
type LS keyof typeof ListStyle
interface HTMLBlock extends InlineStyleType {
  // 扩展的属性
  // isBold: boolean
  // isItalic: boolean
  // isUnderlined: boolean
  listType: LS
}

这些示例展示了如何在Typescript中使用枚举映射。通过使用键值枚举映射，我们可以更简洁地编写代码。在基本枚举使用示例中，我们可以看到如何循环枚举值和调用函数。在枚举键值使用示例中，我们展示了如何循环枚举的键值对。最后，在接口映射示例中，我们展示了如何将枚举值映射到接口的属性，并扩展接口的属性。

通过使用这些映射方法，我们可以更高效地编写Typescript代码。这些映射方法提供了一种简洁而强大的方式来处理枚举类型。无论是循环枚举值、调用函数还是将枚举值映射到接口的属性，映射在Typescript中都具有极大的实用性。

希望本文对你理解Typescript中的映射方法有所帮助！

0