Mon Apr 03 2023

Enums in TypeScript

What is an enum? What good do they do? Well, an enum is kind of a set of constants that we can use in our projects to keep our code clean and uniformed. They do not provide any extra functionality that you can't get out of an object or regular constants - but they do still give good value when it comes to keeping the code base clean. So in my opinion, enums are great to use in our projects.

In todays guide, we will explore some example of enums, and see how we can use them.

Basic numeric enum

Let start with an easy example where we want to define some constants with fixed values.

enum NUMBER {
  ONE = 1,
  TWO = 2,
  THREE = 3,
}
console.log(NUMBER.ONE); // Print: 1

Equivalent to

const NUMBER = {
  ONE: 1,
  TWO: 2,
  THREE: 3,
};
console.log(NUMBER.ONE);

String enum

We can use strings as value as well. Example where we are defining status codes:

enum STATUS_CODE {
  ACCPETED = "accepted",
  DENIED = "denied",
  WAITING_RESPONSE = "awaiting",
}

Enums without initializers

We can leave the initializing value completely empty if we want. Then the values will be 0, 1, 2 and so on. Example:

enum STATUS_CODE {
  ACCPETED,
  DENIED,
  WAITING_RESPONSE,
}

console.log(STATUS_CODE.ACCPETED); // Print: 0
console.log(STATUS_CODE.DENIED); // Print: 1

Enum as an argument in function

We can use enums as a definition in our arguments in a function, just like any other type. Example:

enum ANIMAL {
  CAT = "cat",
  DOG = "dog",
  HORSE = "horse",
}

const checkIfCat = (animal: ANIMAL) => {
  return animal === ANIMAL.CAT;
};

console.log(checkIfCat(ANIMAL.DOG)); // False
console.log(checkIfCat(ANIMAL.CAT)); // True

Enum as class property

If we have a class property that should be a constant value, we can use enums here as well.

enum VEHICLE_TYPE {
  CAR = "car",
  MC = "motor cycle",
  BOAT = "boat",
}

class Car {
  type = VEHICLE_TYPE.CAR;
}

Enum in interfaces

If we want to use them in interfaces, we can do so to:

enum VEHICLE_TYPE {
  CAR = "car",
  MC = "motor cycle",
  BOAT = "boat",
}

interface ICar {
  type: VEHICLE_TYPE.CAR;
}

Summary

In this guide, we looked at enums in TypeScript and shared some examples. Enums are not that complicated, but they do offer good value in cleaning up our code when it comes to static values. They are good to use when defining, let say, response codes or some statuses etc.

Example

If we have a function in our backend API that are checking for if a user is authorized, we can use enums to return the value to the client that then can easily verify without having to use hardcoded strings.

Our enums that are used in both API and client

enum AUTHORIZATION_CODE {
  AUTHORIZED = "authorized",
  FORBIDDEN = "forbidded",
}

Our API example

app.get("/checkAuthorize", (req, res) => {
  if (req.token) {
    res.send({ authCode: AUTHORIZATION_CODE.AUTHORIZED });
  } else {
    res.send({ authCode: AUTHORIZATION_CODE.FORBIDDEN });
  }
});

Client example

fetch("/checkAuthorize").then((response) => {
  if (response.authCode === AUTHORIZATION_CODE.AUTHORIZED) {
    console.log("AUTHORIZED");
  } else if (response.authCode === AUTHORIZATION_CODE.FORBIDDEN) {
    console.log("FORBIDDEN");
  }
});

Instead of having to do like this:

fetch("/checkAuthorize").then((response) => {
  if (response.authCode === 'authorized') {
    console.log("AUTHORIZED");
  } else if (response.authCode === 'forbidden') {
    console.log("FORBIDDEN");
  }
});