Enum

Understanding Enums: Definition and Usage in TypeScript

This article provides a comprehensive overview of enums, including their definition, different types, and practical applications in TypeScript.

Definition

Enums provide a way to define named constants. They enhance code readability by representing numerical or string values with meaningful names. Consider the following naive approach:

let response = 1;
let fail = 0;

It’s not immediately obvious what 1 and 0 represent. To improve clarity, you might use constants:

const YES = 1;
const NO = 0;

let response = YES;
let fail = NO;

This is much better, but enums offer a more structured approach. Think of enums as a set of related constants grouped together.

enum Response {
  No,
  Yes
}

let response = Response.Yes;
let fail = Response.No;

While YES and NO are independent constants, the Response enum establishes a clear relationship between No and Yes.

Furthermore, enums offer more versatility than simple constants, as we’ll explore in this article.

Numeric Enums

enum Type {
	INACTIVE,
	ACTIVE,
	ALL
}

By default, enum members are assigned numerical values starting from 0. Therefore, Type.INACTIVE has a value of 0. You can also access the enum member name using the numerical value: Type[0] returns "INACTIVE".

Explicitly Assigned Values

enum Type {
	INACTIVE,
	ACTIVE = 5,
	ALL
}

When you explicitly assign a numeric value to an enum member, subsequent members are automatically incremented. In this example: Type.INACTIVE is 0, Type.ACTIVE is 5, and Type.ALL is 6.

Bit Shifting for Value Assignment

enum Type {
	INACTIVE = 1 << 1,
	ACTIVE = 1 << 2,
	ALL = 1 << 3
}

Using bit shifting can help prevent value collisions and simplify assignment when dealing with flags or bitmasks.

Enums as Strings

enum Type {
	INACTIVE,
	ACTIVE,
	ALL
}

By default, enums have numeric values. You can retrieve the string representation of an enum member using Type[Type.INACTIVE], which will return "INACTIVE".

String Value Assignment

enum Type {
	INACTIVE = 'inactive',
	ACTIVE = 'active',
	ALL = 'all'
}

You can directly assign string values to enum members. In this case, Type.INACTIVE will be the string "inactive". To retrieve the enum member from a string, you can use a type assertion: 'inactive' as Type.

Important Note

When mixing numeric and string enum members, it’s best practice to explicitly assign values to all members. If a string member is followed by an uninitialized member, TypeScript will attempt to increment the previous value, resulting in an error because it cannot increment a string.

Function Value Assignment

Enums can even be assigned function return values:

enum Type {
	INACTIVE = getInactiveValue(),
	ACTIVE = getActiveValue(),
	ALL // error
}

As with string value assignments, you must initialize all members when using function calls.

Ambient Enums

enum Type {
	INACTIVE = 1,
	ACTIVE,
	ALL = 2
}

Ambient enums (declared with declare enum) allow duplicate value declarations. In the example above, Type.ACTIVE and Type.ALL both have the value 2. However, attempting to retrieve the enum member name using Type[2] will result in an error.

Using OR (Bitwise OR)

enum Type {
	INACTIVE,
	ACTIVE,
	ALL
}

enum Active {
  type: Type.INACTIVE | Type.ACTIVE
}

You can use the bitwise OR operator (|) to combine enum members, typically for flags or options.

Conclusion

Enums provide a powerful way to define and manage constants in TypeScript, improving code readability and maintainability. They offer flexibility through numeric and string value assignment, as well as the ability to use function return values. Understanding the nuances of enums, such as explicit value assignment and the implications of ambient enums, is crucial for effective TypeScript development.

Reference

• Enum