Enums in TypeScript

Enum is a data type, which helps to itemize lists or collections of items with literals instead of integers. With enums, it is easier to maintain a list of items and understand the source code. An Enum contains a series of items in a list and each item is associated with integer value.

Let's understand this concept with an example. We have four enums: CustomerType, FabricType, CapSize and Season.

  • Enum "CustomerType" contains types of customers like bronze, silver and gold.
  • Enum "FabricType" contains types of fabrics with associated values.
  • Enum "CapSize" contains sizes of caps.
  • Enum "Season" contains list of seasons.

When we do not define any value for items in Enum list, then compiler assigns zero and increment each item value by one. When we explicitly set value to variables in Enum, then compiler increments value of the next item by one. In the following code, we define fabric cap size large with value of 35, so the compiler will assign value of 36 for the next item xl

enum CustomerType { Bronze = -10, Silver, Gold } enum FabricType { Polyster = 101, Cotton, Linen, Wool, Fur } enum CapSize { Small = 10, Medium, Large = 35, XL, XXL } enum Season { Summer = 10, Fall, Spring = 30 >> 2, Winter }

Typescript Enum facilitates use of binary operators like ">>". Enum item Spring has a value of 30. When we apply binary operands with a value of 2 to the item Spring, then the value of Spring becomes quotient 8 (note: 7.5 get rounds up to 8).

let customerType: CustomerType = CustomerType.Bronze; let capType: CapSize = CapSize.XL; let clothType: FabricType = FabricType.Linen; let seasonType: Season = Season.Winter;

Then we declare four variable as Enum type and assign them their Enum variable value. These variables will be used to identify the appropriate conditions in the switch block. We are passing a combination of four Enum variables as input conditions. Each switch block calculates its respective value of each Enum variable and provides the result in a browser pop-up message box.

switch (customerType + clothType + capType + seasonType) { case CustomerType.Bronze + FabricType.Wool + CapSize.XXL + Season.Summer: alert(customerType + clothType + capType + seasonType); break; case CustomerType.Gold + FabricType.Cotton + CapSize.Medium + Season.Fall: alert(customerType + clothType + capType + seasonType); break; case CustomerType.Silver + FabricType.Fur + CapSize.Small + Season.Spring: alert(customerType + clothType + capType + seasonType); break; case CustomerType.Bronze + FabricType.Linen + CapSize.XL + Season.Winter: alert(customerType + clothType + capType + seasonType); break; case CustomerType.Gold + FabricType.Polyster + CapSize.Large + Season.Fall: alert(customerType + clothType + capType + seasonType); break; }

In the preceding code, we are not using numbers to get the value of any of the variables; we are using literals. This makes it easy for any programmer to read and maintain source code without having any background knowledge about it.

With the above example, we were able to verify that we can enumerate a list of items with the help of literals. We can also apply binary operands on these literals to change the enum values.