你如何在打字稿中输入一个枚举变量？

Question

我在关于如何访问 html 中的枚举的各种 stackoverflow 答案中看到，在组件上定义一个变量并将其设置为等于枚举，就像在这个问题中一样。但是，会是什么类型呢？

使用他们的例子：

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
}

被转换为：

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

或者，正如Gerrit0 所指出的（有关完整信息和应有的学分，请参阅他们的答案）：

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