我在TypeScript中定义了以下enum:

enum Color{
    Red, Green
}

现在在我的函数中,我以字符串的形式接收颜色。我尝试了以下代码:

var green= "Green";
var color : Color = <Color>green; // Error: can't convert string to enum

如何将该值转换为enum?


当前回答

几乎所有答案都使用不安全的类型转换(as或is)。这一条没有:


enum Color {
    Red = "red",
    Green = "green"
}

const colorsMap = new Map<string,Color>(Object.values(Color).map((v) => [v,v]))

function parseColor(volumeData: string): Color | undefined {
    return colorsMap.get(volumeData)
}

const color = parseColor("red")

其他回答

TL;博士: :

创建一个函数,解析字符串值并将其转换为枚举。 如果你需要给定值的键名,不要使用TS enum。

首先,枚举是人类可读的名称和值之间的映射,这就是它的用途。

默认值: TS默认情况下会确保枚举中定义的键有唯一的值。

This

enum Color {
    Red, Green
}

等于

enum Color {
    Red = 0,
    Green = 1
}

转译的js代码都将

"use strict";
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
})(Color || (Color = {}));

由于这是不可读的,下面是一旦创建的结果对象:

{0: 'Red', 1: 'Green', Red: 0, Green: 1}

该对象具有字符串和数字属性(不可能有任何冲突,因为您不能将枚举键定义为数字)。TS足够酷,可以生成一个包含映射键->值和值->键的对象。

感谢上帝,这是一个双射映射,即每个唯一值都有它的唯一键(因此反过来也是正确的)

现在麻烦来了,如果我强制使用相同的值呢?

enum Color {
    Red = 0,
    Green = 0
}

这是最终创建的js对象

{0: 'Green', Red: 0, Green: 0}

我们不再有双射,(这是满射),没有魔法映射0:['Green', 'Red']。只有0:“绿色”,我们失去了0:“红色”

提示:当值为数字时,TS将总是尝试放置反向映射(value ->键)。

现在,正如你所知道的,你也可以在枚举中定义字符串值,让我们只将Green值更改为"Green"

enum Color {
    Red = 0,
    Green = "GREEN"
}

这是生成的js对象

{0: 'Red', Red: 0, Green: 'GREEN'}

如你所见,Typescript并没有生成映射值->键。 它不会,因为您可能会在值和键名之间发生冲突。记住:键不能是数字,因此当值是数字时,就没有碰撞的风险。

这使您明白,您不应该依赖于枚举的value ->键映射。映射可能根本不存在或不准确。

同样,枚举是(也只能被视为)人类可读的值名称。在某些情况下,ts甚至根本不会产生任何反向映射。这就是定义枚举const时的情况。

const枚举是一个纯编译时的枚举,TS会在编译时将枚举的使用替换为其对应的值

例如:

const enum Color {
    Red = 0,
    Green = "GREEN"
}

被转译为

"use strict";

所以我想说,没什么,因为“use strict”;跟我们写的都没有关系。

下面是一个用法的相同示例:

const enum Color {
    Red = 0,
    Green = "GREEN"
}
console.log(Color.Green);

被转译为

"use strict";
console.log("GREEN" /* Green */);

如你所见,颜色。Green被转译器替换为“Green”。

回到最初的问题,如何将字符串转换为enum ?

解析器解决方案: 我很抱歉,但我推荐的唯一干净的方法是写一个函数,使用开关情况是一个聪明的方法来实现这一点。

function parseColorName(color: string): Color {
  switch (color) {
    case 'Red': return Color.Red;
    case 'Green': return Color.Green;
    default: throw new Error('unknown color');
  }
}

自定义enum解决方案:

请注意,TS枚举是不透明的,这意味着编译器无法正确地键入值。出于这个原因(特别是当你需要使用反向映射时),我建议你自己做枚举,如下所示:

export const ColorType = {
  RED: 'Red',
  GREEN: 'Green',
} as const;

export type ColorType = typeof ColorType[keyof typeof ColorType];

下面是安全的(颜色只能取一个有效的已知值)。简而言之,您依赖于字符串联合而不是枚举值。

const color: ColorType= "Green";
// And if you need to create a color from the enum like value:
const anotherColor: ColorType = ColorType.RED;

如果您正在使用名称空间来扩展枚举的功能,那么您还可以这样做

    enum Color {
        Red, Green
    }

    export namespace Color {
      export function getInstance(color: string) : Color {
        if(color == 'Red') {
          return Color.Red;
        } else if (color == 'Green') {
          return Color.Green;
        }
      }
    }

像这样使用它

  Color.getInstance('Red');

在这个问题中有很多混合信息,所以让我们讨论TypeScript 2的整个实现。在Nick's Guide to Using Enums in Models with TypeScript中的x+。

本指南适用于:创建客户端代码的人,这些客户端代码从服务器获取一组已知字符串,这些字符串可以方便地在客户端建模为Enum。

定义枚举

让我们从枚举开始。它应该看起来像这样:

export enum IssueType {
  REPS = 'REPS',
  FETCH = 'FETCH',
  ACTION = 'ACTION',
  UNKNOWN = 'UNKNOWN',
}

这里需要注意两点:

我们显式地将这些声明为字符串支持的枚举情况,这允许我们用字符串来实例化它们,而不是其他一些不相关的数字。 我们添加了一个选项UNKNOWN,这个选项在我们的服务器模型上可能存在,也可能不存在。如果您愿意,可以将其处理为未定义,但我喜欢尽可能避免在类型上使用|未定义以简化处理。

使用UNKNOWN大小写的好处是,你可以在代码中非常明显地看到它,并为未知枚举大小写设置亮红色和闪烁的样式,这样你就知道你没有正确地处理某些事情。

解析枚举

您可以在另一个模型中使用这个枚举,或者单独使用这个枚举,但是您必须将字符串-y类型的枚举从JSON或XML (ha)解析为强类型的对应对象。当嵌入到另一个模型中时,这个解析器存在于类构造函数中。

parseIssueType(typeString: string): IssueType {
  const type = IssueType[typeString];
  if (type === undefined) {
    return IssueType.UNKNOWN;
  }

  return type;
}

如果枚举被正确地解析,它将以正确的类型结束。否则,它将是未定义的,您可以拦截它并返回UNKNOWN情况。如果您更喜欢使用undefined作为未知情况,则可以直接返回尝试的enum解析的任何结果。

从这里开始,只需要使用parse函数和使用新创建的强类型变量。

const strongIssueType: IssueType = parseIssueType('ACTION');
// IssueType.ACTION
const wrongIssueType: IssueType = parseIssueType('UNEXPECTED');
// IssueType.UNKNOWN

我正在寻找一个答案,可以从字符串中获得enum,但在我的情况下,enum值有不同的字符串值对应。OP有一个简单的枚举颜色,但我有一些不同的东西:

enum Gender {
  Male = 'Male',
  Female = 'Female',
  Other = 'Other',
  CantTell = "Can't tell"
}

当你试图解决性别问题时。CantTell与"Can't tell"字符串,它返回未定义的原始答案。

另一个答案

基本上,受到这个答案的强烈启发,我想出了另一个答案:

export const stringToEnumValue = <ET, T>(enumObj: ET, str: string): T =>
  (enumObj as any)[Object.keys(enumObj).filter(k => (enumObj as any)[k] === str)[0]];

笔记

我们使用筛选器的第一个结果,假设客户端从枚举中传递一个有效的字符串。如果不是这样,则返回undefined。 我们将enumObj转换为any,因为在TypeScript 3.0+(目前使用TypeScript 3.5)中,enumObj被解析为unknown。

使用实例

const cantTellStr = "Can't tell";

const cantTellEnumValue = stringToEnumValue<typeof Gender, Gender>(Gender, cantTellStr);
console.log(cantTellEnumValue); // Can't tell

注意:而且,正如有人在评论中指出的那样,我还想使用noImplicitAny。

更新版本

没有对任何正确类型的强制转换。

export const stringToEnumValue = <T, K extends keyof T>(enumObj: T, value: string): T[keyof T] | undefined =>
  enumObj[Object.keys(enumObj).filter((k) => enumObj[k as K].toString() === value)[0] as keyof typeof enumObj];

此外,更新版本有一个更简单的方法来调用它,更可读:

stringToEnumValue(Gender, "Can't tell");

以这种方式创建的枚举被编译成一个对象,该对象同时存储正向(名称->值)和反向(值->名称)映射。从这张chrome devtools截图中我们可以看到:

下面是一个关于对偶映射如何工作以及如何从一个映射转换到另一个映射的例子:

enum Color{
    Red, Green
}
// To Number
var greenNr: number = Color['Green'];
console.log(greenNr); // logs 1

// To String
var greenString: string = Color[Color['Green']];  // or Color[Color[1]
console.log(greenString); // logs Green

// In your example

// recieve as Color.green instead of the string green
var green: string = Color[Color.Green];  

// obtain the enum number value which corresponds to the Color.green property
var color: Color = (<any>Color)[green];  

console.log(color); // logs 1