In TypeScript, it can be challenging to determine the equality between a value and an enum

Question

In TypeScript, it can be challenging to determine the equality between a value and an enum

I am encountering an issue with my simple 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))

When I try to check the color using:

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

The output is false.

I have attempted different variations like

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

However, it resulted in a compiler error.

My question is how can I successfully compare two enums with the syntax enum === enum?

javascript json angular typescript enums

Answer 1

Answer №1

The issue at hand is that TypeScript's enums are essentially "named numeric constants."

As stated in the official TypeScript documentation on enums:

Enums permit the declaration of a collection of named numeric constants.

An enum consists of one or more members with corresponding numeric values . . .

A better alternative in this case would be to utilize string literal types:

type Color = "BLUE" | "RED";

Complete Code Example (Check out 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

The issue at hand is that TypeScript's enums are essentially "named numeric constants."

As stated in the official TypeScript documentation on enums:

Enums permit the declaration of a collection of named numeric constants.

An enum consists of one or more members with corresponding numeric values . . .

A better alternative in this case would be to utilize string literal types:

type Color = "BLUE" | "RED";

Complete Code Example (Check out 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 3

Answer №2

A different approach (introduced since TS 2.4) is to use String enums:

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

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

Since string enums do not have a reverse mapping (at least as of 2020), it might be wise to inline them using the const modifier.

Answer 4

A different approach (introduced since TS 2.4) is to use String enums:

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

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

Since string enums do not have a reverse mapping (at least as of 2020), it might be wise to inline them using the const modifier.

In TypeScript, it can be challenging to determine the equality between a value and an enum

Answer №1

Complete Code Example (Check out Demo):

Answer №2

Similar questions

Promise.all() ensures that all promises in the array are resolved with the same value

Issue with ActivatedRoute being empty when called in a Service in Angular version 2.0.2

Having trouble with JSFIDDLE not functioning properly on my website

Nodemailer is experiencing difficulties when used within the routes directory

JavaScript - incorrect order for compiling

Using NgRx to observe state changes in a service instead of relying on an Effect

``Why Ionic 3 Popover Sizes Should Adapt to Different Screen

HTML code displaying a fixed message at the top of the webpage

After deploying a Next.js project on an Ubuntu server, dynamic pages are returning a 404 error

Tips for choosing a dynamically generated ajax element

Identifying Changes with jQuery Event Listeners

invoking a function at a designated interval

Combine two arrays of data sources

Geoserver does not have the 'Access-Control-Allow-Origin' header

Reactjs error: Invariant Violation - Two different nodes with the matching `data-reactid` of .0.5

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

Master the Art of Animating Letters in the DOM by Navigating Through Any Array of Characters

The concept of a singleton design pattern is like a hidden treasure waiting to be

Sending JSON data through an AJAX post request will not work

Bidirectional data binding of JSON object in Angular