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

What could be causing the array to display incorrect results in React?

Exploring the possibilities of implementing Undo and Redo features in freehand drawing with Reactjs on

Removing div elements containing specific text using jQuery

How to Use C#'s Newtonsoft.Json Library to Retrieve a Name from a JSON

Utilizing TypeScript to define React interfaces

Is it more efficient to use Vue events or Vuex for transmitting data between components?

Exploring the power of async/await in combination with map or foreach

The Uib-Dropdown functionality is not functioning properly when placed within the body of an HTML view

Unable to retrieve scope variable within AJAX call

Create a Typescript React class and define the State type as either an interface or null

A pale tooltip with a light arrow appearing against a soft white backdrop

Mono repo project utilizing Angular 4+ and Typescript, enhanced with Bootstrap styling

Is it possible to overlook specific attributes when constructing an object using TypeScript interfaces?

Leveraging Angular to retrieve images from Google Feed API

Why does jQuery val() function fail to clear readonly input date in Firefox but succeed in Chrome?

Investigating issues with console errors and variables within callback functions in Angular 2 unit tests using Jasmine

An essential aspect of utilizing ngrx is understanding how to access the previous and current state to effectively compare them when subscribing to the store

Automated Submission and Online Posting of (Web Form) with JavaScript Script

Empty Media Viewer

Performing a JSON array query on a JSON field in Laravel version 5.4