Question

如果我有一个这样定义的枚举：

export enum State {
    Archived = 0,
    OnShoppingListChecked = 1,
    OnShoppingListUnchecked = 2
}

和使用枚举的类：

import { State } from "./State";
export class GroceryDto {
  public name: string = null;
  public currentState: State = null;
}
export default GroceryDto;

我有一些代码正在尝试根据currentState的{{1}}进行过滤，但是没有限定要输入到数组中的任何内容。

GroceryDto

我可以通过将其转换为字符串来获得所需的结果，但是如果使用打字稿，这似乎是不必要的。

//...some code to fetch data
let activeGroceries = response.data.activeGroceries as GroceryDto[]; //casts correctly to an array of 4 items
let visibleGroceries = activeGroceries.filter(
  g => g.currentState === State.OnShoppingListUnchecked
);
//visibleGroceries is empty but should return the same 4 values

Answer 1

请注意，TypeScript中的enum a非常……他们可能会被误解，并且总是可以用作基于字符串和基于数字的类型。

如果您以enum的形式使用您显示的形式：

State.OnShoppingListUnchecked

然后它将被表示为数字并与数值1进行比较。但是请考虑以下交叉匹配的枚举代码：

a === State['OnShoppingListUnchecked'] // compare against 1
a === State[State['OnShoppingListUnchecked']] // compare against 'OnShoppingListUnchecked' string
a === State[State[State['OnShoppingListUnchecked']]] // Again against numeric 1
// ... and so one

可能是从服务器端字符串而不是数字获得的，因此检查失败。您可以通过以下方式为该检查添加一些自动化功能：

let toCompare = 1 // Field you wish to compare against
if(typeof(compareValue) === 'number') {
  return State[toCompare ] === compareValue // Compare number against number
} else if (typeof(compareValue) === 'string') {
  return State[State[toCompare ] === compareValue // compare input string against string representation of enum
}

为确保无论输入字符串还是数字，您都将始终与正确的enum条目进行比较。

请记住，自TyeScript 2.4及更高版本开始支持基于字符串的枚举，并且我个人认为应尽量减少使用它们，这主要是因为基于数字的枚举是从数组安排中选择某些附加信息的便捷方法结构，而基于字符串的则无法使用这种方式：

enum NamesEnum {
    NAME0 = 0,
    NAME1 = 1
};

namesToDisplay: string[] = [
  'Name1 display value',
  'Name2 display value'
];

let enumVal = someFunctionThatGetsEnum(); // Works only for number-based enums
this.currentDisplay = this.namesToDisplay[enumVal];

和在模板中：

<p>{{ currentDisplay  }} </p>

如果您没有用例情况来进行数组索引编制，则可以将String-String枚举类型替换为基于字符串的枚举，其优点与enums相同，但您不必担心类型和兼容性问题。

Answer 2

似乎差异在于服务器如何发送回数据，每个currentState上的GroceryDto被作为字符串发送出去。更改像@Aleksey所述的枚举定义解决了我的问题：

export enum State {            
        Archived = "Archived",
        OnShoppingListChecked = "OnShoppingListChecked",
        OnShoppingListUnchecked = "OnShoppingListUnchecked"
    }

如何按Typescript中的枚举值正确过滤？

2 个答案: