Numeric Enums

Numeric enums in TypeScript assign a numeric value to each member. These values can be explicitly defined or automatically assigned based on their position in the enum.

Numeric enums can have members with specified values:

enum Color {

Red = 1,

Green = 2,

Blue = 4

}

In this case, we define a Color enum with three members, each assigned a specific numeric value. Numeric enums are beneficial when working with constants that have numerical significance, like days of the week or calendar months.

String Enums

In TypeScript, string enums are a type of enumeration where each member is associated with a string value rather than a numeric one. You can create a string enum using the enum keyword followed by the enum name and its members:

enum Fruit {

Apple = "apple",

Banana = "banana",

Orange = "orange"

}

The Fruit enum consists of three members, each linked to a string value. Accessing these members is straightforward:

console.log(Fruit.Apple); // "apple"

console.log(Fruit.Banana); // "banana"

console.log(Fruit.Orange); // "orange"

String enums are advantageous when defining a set of string constants in your code. They offer more safety than plain strings, as TypeScript ensures only the defined enum values are utilized, reducing the risk of typographical errors.

Heterogeneous Enums

A heterogeneous enum allows members of differing types. Unlike standard enums, where each member typically shares the same type (usually numeric or string), a heterogeneous enum can contain various types.

Here's an example:

enum Status {

Ready = 0,

Waiting = "WAITING",

Done = "DONE"

}

In this instance, the Status enum has three members: Ready (numeric), Waiting (string), and Done (string). While less common, heterogeneous enums may be useful when you need to define values of varying types.

Computed Enums

Computed enums define members whose values are determined at runtime. To construct a computed enum, at least one member must have a value that cannot be expressed as a constant but is evaluated during execution:

enum Numbers {

One = 1,

Two = One * 2,

Three = Two + 1,

Four = Math.round(Math.random() * 10)

}

In this example, the Numbers enum includes members with values computed using other members or random functions. Computed enums are less common but can be useful for values not known at compile time.

Reverse Mappings with Enums

TypeScript supports reverse mappings for enums, enabling you to find an enum member by its value. When you define an enum, TypeScript automatically creates a reverse mapping between member names and their values, simplifying lookups:

enum Direction {

Up = 1,

Down,

Left,

Right

}

console.log(Direction.Up); // 1

console.log(Direction[1]); // "Up"

console.log(Direction[2]); // "Down"

console.log(Direction[3]); // "Left"

console.log(Direction[4]); // "Right"

With reverse mappings, you can retrieve enum members by their values using bracket notation. This feature is particularly useful when you need to associate values with corresponding enum members.

Const Enums

A const enum is defined with the const keyword. It behaves similarly to a regular enum but differs in significant ways:

const enum Direction {

Up,

Down,

Left,

Right

}

console.log(Direction.Up); // 0

console.log(Direction.Down); // 1

console.log(Direction.Left); // 2

console.log(Direction.Right); // 3

When using a const enum, the enum is inline-expanded at compile time, resulting in no runtime object. This leads to reduced code size and enhanced performance.

Differences Between Const Enum and Regular Enum

1. Compile-Time Differences: Regular enums create a runtime object, while const enums are replaced with their values at compile time, leading to smaller bundle sizes.
2. Usage Differences: Regular enums can be used in both runtime and compile-time contexts, whereas const enums are limited to compile-time contexts.
3. Type Differences: Regular enums create a new type, while const enums do not.
4. Namespace Differences: Regular enums create a namespace for grouping related constants, whereas const enums do not.

In summary, when deciding between const and regular enums, consider whether you need runtime usage or performance optimization.

Keyof typeof and Enums

The keyof typeof operator in TypeScript is invaluable for ensuring type safety when working with enum values. This operator returns the names of all properties of a type. When paired with typeof, it retrieves the names of properties of a value's type, which can be particularly useful for enums.

For instance, consider the Color enum:

enum Color {

Red = "red",

Green = "green",

Blue = "blue"

}

type ColorKey = keyof typeof Color; // "Red" | "Green" | "Blue"

This creates a ColorKey type representing the keys of the Color enum. You can use this type to enforce that only valid enum values are passed to functions:

function printColor(color: ColorKey) {

console.log(Color[color]);

}

printColor("Red"); // red

printColor("Yellow"); // Argument of type '"Yellow"' is not assignable to parameter of type '"Red" | "Green" | "Blue"'.

Using keyof typeof enhances type safety, ensuring that only valid enum values are accepted.

Constraints of Enums

While enums can be beneficial, there are drawbacks. Misusing enums can lead to code that is hard to read and maintain. Enums are also non-extensible; once defined, adding new values can be problematic.

Another potential issue arises when using enums as function arguments, where passing invalid values can introduce errors. This is particularly relevant with numeric enums, where it may be challenging to remember which numbers correspond to which members.

In modern TypeScript development, it may often suffice to use an object with the as const assertion instead of an enum. This approach aligns more closely with JavaScript's state and simplifies value extraction.

In conclusion, when used appropriately, enums can enhance TypeScript by clarifying the intent behind "magic values" and providing a type-safe approach. However, improper use can lead to confusion about their purpose and implementation.

If you have any questions or thoughts, feel free to leave a comment!

Support My Work

If you enjoy this content and wish to support my work, consider buying me a coffee or clicking the clap 👏 button below a few times. Your support is crucial in motivating me to continue creating valuable content — thank you!

Want to Connect?

LinkedIn - Twitter - GitHub

This video, "Master TypeScript Enum Basics: Essential Tips for Beginners," offers crucial insights for those just starting with TypeScript enums.

In this full course video, "TypeScript Full Course with a project (part-1) | Zero to Hero | English," you will find a comprehensive overview, including projects and practical applications of TypeScript.