Why I can't switch on this enum?

user_4442337 0
Viewed 42

I have the following enum plus function that switch-case on it.

const enum ApplianceStatus {
  ONLINE = "Online",
  OFFLINE = "Offline",
  UNAVAILABLE = "Unavailable",
}
function getStatusColor(status: ApplianceStatus) : string {
  switch (status) {
    case status.ONLINE:
      return "list-group-item-success";
    case status.OFFLINE:
      return "list-group-item-danger";
    case status.UNAVAILABLE:
      return "list-group-item-warning";
  }
}

I'm getting a Property '***' does not exist on type 'ApplianceStatus'.

The same exact pattern for this other enum works instead:

const enum SupportedColor {
  BLUE = "Blue",
  YELLOW = "Yellow",
}

// no error here
function doSomething(supportedColor: SupportedColor): boolean {
  switch (supportedColor) {
    case SupportedColor.BLUE:
      return true;
    case SupportedColor.YELLOW:
      return true;
  }
}

I really can't understand what's going on.

typescript
2 Answers

in the first situation, you are accessing an instance field, i.e. status.ONLINE. So basically it's like you are accessing ONLINE.ONLINE. You need to access the enum as you did in the second case: ApplianceStatus.ONLINE, etc.

user_33562180

You should use the name of the enum and not the variable status

e.g

enum ApplianceStatus {
  ONLINE = "Online",
  OFFLINE = "Offline",
  UNAVAILABLE = "Unavailable",
}

function getStatusColor(status: ApplianceStatus): string {
  switch (status) {
    case ApplianceStatus.ONLINE:
      return "list-group-item-success";
    case ApplianceStatus.OFFLINE:
      return "list-group-item-danger";
    case ApplianceStatus.UNAVAILABLE:
      return "list-group-item-warning";
  }
}

note: you don't have to add const to your enum (link to official doc)

To go a bit further:

You are not even force to use a switch case, you can use a dict to be slightly more efficient (as the dict is initialised only once)

enum ApplianceStatus {
  ONLINE = "Online",
  OFFLINE = "Offline",
  UNAVAILABLE = "Unavailable",
}

const statusColorMap: { [key in ApplianceStatus]: string } = {
  [ApplianceStatus.ONLINE]: "list-group-item-success",
  [ApplianceStatus.OFFLINE]: "list-group-item-danger",
  [ApplianceStatus.UNAVAILABLE]: "list-group-item-warning",
};

const getStatusColor = (status: ApplianceStatus): string => statusColorMap[status];
user_45304400
Related