Enum in Typescript

TypeScript provides enums, which are a set of named values or constants. Enums define a set of related constants with names and values. Enums are useful when we must define a set of related constants that can be used across our codebase. This article will overview TypeScript enums, creating and using them in TypeScript code, and best practices for working with enums.

Creating TypeScript Enums:

TypeScript enums are defined using the enum keyword. The syntax for defining an enum is as follows:

enum DataFlair_MyEnum {
 Value1,
 Value2,
 Value3,
}

In this example, we have defined an enum called DataFlair_MyEnum, which has three values: Value1, Value2, and Value3. By default, enums start with a value of 0 and increment by 1 for each subsequent value. So, in this case, Value1 is 0, Value2 is 1, and Value3 is 2.

We can also specify explicit values for each enum value. For example:

enum DataFlair_MyEnum {
 Value1 = 10,
 Value2 = 20,
 Value3 = 30,
}

In this example, Value1 has a value of 10, Value2 has a value of 20, and Value3 has a value of 30.

Using TypeScript Enums:

Once we have defined an enum, we can use it in our TypeScript code. We can reference enum values by their name, like this:

enum DataFlair_MyEnum {
 Value1,
 Value2,
 Value3,
}


const value = DataFlair_MyEnum.Value1;
console.log(value);

Output–

In this example, we have defined an enum called DataFlair_MyEnum and then assigned the value of Value1 to a constant called value. We can also use enums in switch statements like this:

enum DataFlair_MyEnum {
 Value1,
 Value2,
 Value3,
}


function doSomething(value: DataFlair_MyEnum) {
 switch (value) {
   case DataFlair_MyEnum.Value1:
     console.log('Value 1');
     break;
   case DataFlair_MyEnum.Value2:
     console.log('Value 2');
     break;
   case DataFlair_MyEnum.Value3:
     console.log('Value 3');
     break;
 }
}


console.log(doSomething(DataFlair_MyEnum.Value2));

Output–

In this example, we have defined a function called doSomething that takes a parameter of type DataFlair_MyEnum. We use a switch statement inside the function to determine which enum value was passed in and log the appropriate message.

Best Practices for Working with TypeScript Enums:

Here are some best practices for working with TypeScript enums:

1. Use all-caps for enum names and PascalCase for enum value names. This makes it clear that they are constants and distinguishes them from other variables in your code.

2. Use descriptive names for enum values. This improves the readability and comprehension of your code.

3. Specify explicit values for enum values when necessary. This can make your code more clear and less error-prone.

4. Use enums sparingly. Enums can be useful but can make your code more complex and harder to read. Consider whether an enum is the best solution before using one.

Various types of enum in TypeScript

In TypeScript, an enum is a way to define a set of named constants. There are several types of enums in TypeScript:

1. Numeric enums: This is the most common type of enum. Numeric enums have a set of values, each associated with a named constant. The values can be explicitly set or can be auto-generated by the compiler.

2. String enums: String enums have a set of string values, with each value being associated with a named constant. The values cannot be auto-generated by the compiler and must be explicitly set.

3. Heterogeneous enums: Heterogeneous enums have a mix of string and numeric values. However, this type of enum is not recommended as it can lead to confusion and should be used sparingly.

4. Computed enums: Computed enums are enums where each member has a computed value. This can be useful for generating unique values for each member or for creating more complex enums.

Overall, enums in TypeScript provide a way to define a set of named constants that can be used throughout our code. The different types of enums provide different ways of defining and using these constants, depending on our needs.

Object vs Enum in TypeScript

In TypeScript, both objects and enums can be used to define a set of named constants. However, there are some key differences between the two:

1. Type safety: Enums provide type safety at the type level, whereas objects only provide type safety at the value level. This means that when using an enum, TypeScript can ensure that the values used are correct. With an object, TypeScript cannot provide this level of type safety.

2. Reverse mapping: Enums can provide a reverse mapping of values to keys, which can be useful in certain situations. Objects do not have this ability.

3. Readability: Enums can be more readable than objects, especially when using numeric or string literals as values. Enums allow for named constants, making code easier to read and understand.

4. Memory usage: Enums are more memory efficient than objects, as they are compiled to a simple lookup table. Objects, on the other hand, have additional overhead due to their structure.

Overall, both objects and enums can be used to define a set of named constants in TypeScript, and the choice between the two depends on the specific needs of the codebase. Enums may be a better choice if type safety and readability are important. Objects may be a better choice if flexibility and dynamic object creation are important.

Extracting the Object Type of Enums

In TypeScript, extracting the object type of an enum is sometimes useful. This can be done using the Record utility type and the typeof operator.

Here’s an example of how to extract the object type of an enum:

enum DataFlair_Color {
 Red = 'RED',
 Green = 'GREEN',
 Blue = 'BLUE',
}


type ColorObject = Record<keyof typeof DataFlair_Color, string>;


// ColorObject is equivalent to:
// {
//   Red: string;
//   Green: string;
//   Blue: string;
// }

In this example, we define an enum DataFlair_Color with string values. We then use the typeof operator to extract the type of the enum and pass it as a parameter to the Record utility type. The Record type takes two type of arguments: the object’s keys and the values’ type. In this case, the keys are the keys of the DataFlair_Color enum, which we extract using the keyof operator, and the values are strings.

The resulting ColorObject type is equivalent to an object type with the same keys as the DataFlair_Color enum and string values.

This technique can be useful when working with enums with string or number values and when you need to extract the object type of the enum for use in your code.

Using Bit Flags with TypeScript Enums

In TypeScript, enums can be used to define bit flags. Bit flags are a way of representing a set of Boolean values using a single integer. Each bit in the integer represents a Boolean value and can be either set (1) or unset (0).

To define a bit flag using an enum in TypeScript, we must use the bitwise OR operator (|) to combine the enum members. Here’s an example:

enum DataFlair_Permission {
 Read = 1 << 0, // binary 001
 Write = 1 << 1, // binary 010
 Execute = 1 << 2, // binary 100
}


const userPermissions = DataFlair_Permission.Read | DataFlair_Permission.Write;

In this example, we define an enum DataFlair_Permission with three members: Read, Write and Execute. We use the left shift operator (<<) to generate a unique binary value for each member, with each value representing a single bit. We can then use the bitwise OR operator (|) to combine the members into a single value.

The resulting userPermissions value is 3, the binary value 011, representing both Read and Write permissions.

We can use the bitwise AND operator (&) to check if a particular bit flag is set. Here’s an example:

const hasReadPermission =
 (userPermissions & DataFlair_Permission.Read) === DataFlair_Permission.Read;

In this example, we use the bitwise AND operator (&) to check if the Read bit is set in the userPermissions value. We compare the result to the DataFlair_Permission.Read value to check if the bit is set.

Using bit flags with enums in TypeScript can be a powerful way to represent sets of Boolean values using a single integer. However, it’s important to use caution when defining and using bit flags, as it can be easy to introduce bugs if the logic needs to be carefully implemented.

Why enums?

Enums in TypeScript is used to define a set of named constants. They are similar to enums in other programming languages but with additional features that make them more powerful and flexible.

Some of the main reasons to use enums in TypeScript are:

1. Code readability: Enums provide a way to give meaningful names to sets of related constants. This can make the code more readable and easier to understand, especially for developers unfamiliar with the codebase.

2. Type safety: Enums in TypeScript is strongly typed, which means that the compiler can catch errors at compile time if a value is assigned that is not part of the enum. This can prevent bugs and make the code more reliable.

3. Better autocompletion: Using enums can improve the development experience by providing better autocompletion and type inference in IDEs and code editors.

4. Maintenance: Enums can help simplify codebase maintenance by providing a centralized location to define and manage related constants.

5. Bit flags: Enums in TypeScript can also be used to define bit flags, which provide a way to represent a set of Boolean values using a single integer. This can be useful in certain situations, such as when working with binary data or permissions.

Conclusion

TypeScript enums are a powerful tool for defining a set of related constants in your code. By defining an enum, you can ensure that your code uses consistent values throughout your application. Enums can be used in switch statements, and other control flow constructs to make your code more readable and maintainable. By following best practices for working with TypeScript enums, you can ensure your code is clean, understandable, and maintainable.