Comparing value to enum isn't obvious in TypeScript

Question

I have very straightforward code:

enum Color { BLUE, RED }

class Brush { 
    color: Color

    constructor(values) { 
        this.color = values.color
    }
}

let JSON_RESPONSE = `{"color": "BLUE"}`

let brush = new Brush(JSON.parse(JSON_RESPONSE))

Now I want to make a check:

console.log(brush.color === Color.BLUE)

And it returns false.

I tried a few combinations like

brush.color === Color[Color.BLUE]

But, of course, got a compiler error.

The question is how to make quite a basic comparison enum === enum?

Answer 1

The problem is that TypeScript enums are actually "named numeric constants."

From the TypeScript documentation on enums:

Enums allow us to define a set of named numeric constants.

The body of an enum consists of zero or more enum members. Enum members have numeric value (sic) associated with them . . .

You should be using string literal types instead:

type Color = "BLUE" | "RED";

---

Full Code (View Demo):

type Color = "BLUE" | "RED";

class Brush { 
    color: Color

    constructor(values) { 
        this.color = values.color
    }
}

let JSON_RESPONSE = `{"color": "BLUE"}`

let brush = new Brush(JSON.parse(JSON_RESPONSE))

console.log(brush.color === "BLUE"); //=> true

Answer 2

An alternative (available since TS 2.4) is String enums:

enum Color {
  BLUE = "BLUE",
  RED = "RED"
}

console.log('BLUE' === Color.BLUE); // true

As there's no reverse mapping for string enums (at least in 2020), one might strongly consider inlining those with const modifier.