CODEWITHSUNDEEP
typescript
browser-bug
browser-bug

Reputation: 2091

Why I can't switch on this enum?

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.

Upvotes: 2

Views: 726

Answers (2)

Kruupös
Kruupös

Reputation: 5474

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];

Upvotes: 1

Stefano Nardo
Stefano Nardo

Reputation: 1645

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.

Upvotes: 1

Related Questions