如何在打字稿中键入枚举变量？

Question

我在各种stackoverflow中看到了如何在html中访问枚举的答案，说明在组件上定义变量并将其设置为等于enum，就像在question中一样。但是，那种类型是什么？

使用他们的例子：

enum MyEnum{
  First,
  Second
}

export class MyComponent{
  MyEnum = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

<div [ngSwitch]="myEnumVar">
  <div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div>
  <div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div>
  <div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div>
</div>

myEnumVar已输入，但MyEnum未输入。我该怎么输入它？

Answer 1

由于枚举是以普通{}创建的，因此其类型实际为object。

例如，枚举：

enum MyEnum{
  First,
  Second
}

是transpiled to：

var MyEnum;
(function (MyEnum) {
    MyEnum[MyEnum["First"] = 0] = "First";
    MyEnum[MyEnum["Second"] = 1] = "Second";
})(MyEnum || (MyEnum = {}));
           // ^^^^^^^^^^^ --- important part

最后，注意MyEnum是一个稍后添加了属性的对象（{}）。更具体地说，使用number键和string值（请参阅下文）。

所以，如果你想申报一个类型，你有一些选择。

对于初学者，您可以使用object或any，如下所示（但也请查看其他选项）：

export class MyComponent{
  MyEnum:Object = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

索引签名类型

另一个选项，对于枚举，您也可以使用该类型 {[s: number]: number | string}：

export class MyComponent{
  MyEnum:{[s: number]: number | string} = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

typeof

或者，pointed by Gerrit0 (see their answer for the full info and due credits)：

export class MyComponent{
  MyEnum:typeof MyEnum = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

Answer 2

虽然acdcjunior的答案在技术上是正确的 - 是的，枚举是一个对象，是的，它可以用{[s: number]: string}类型来描述，这不是你应该如何键入MyEnum属性。

枚举包含字符串和数字值，因此索引签名至少应为{ [s: number]: string | number } - MyEnum[1] === "First"而MyEnum.First === 1。

但是，TypeScript提供了一种更好的方法，typeof运算符。这与JavaScript的typeof不同 - 当您在类型声明中使用typeof时，它会获取值的类型，并且不会限制为基元和object。

要突出显示差异，这是一个例子：

enum MyEnum {
  First,
  Second
}

class MyComponent {
  static MyEnum: typeof MyEnum = MyEnum
  static MyObjectEnum: { [s: number]: string | number } = MyEnum
}

// a is `any`
// can't use MyComponent.MyObjectEnum.First
let a = MyComponent.MyObjectEnum['First']
// b is `MyEnum`
let b = MyComponent.MyEnum['First'] // or MyComponent.MyEnum.First
// c is `any`
let c = MyComponent.MyObjectEnum['Third']
// d is `any`
// using MyComponent.MyEnum.Third catches this error
let d = MyComponent.MyEnum['Third']
// neither catch this error
// e is type `string`
// f is type `string | number`
let e = MyComponent.MyEnum[3]
let f = MyComponent.MyObjectEnum[3]

如果您在尝试输入内容时查看IDE推断的类型，您可以了解应该使用哪些类型。