Converting an integer into a String Enum in TypeScript can result in an undefined value being returned

Issue with Mapping Integer to Enum in TypeScript

export enum MyEnum {
    Unknown = 'Unknown',
    SomeValue = 'SomeValue',
    SomeOtherValue = 'SomeOtherValue',
  }

Recently, I encountered a problem with mapping integer values to my string enums in TypeScript. Despite registering the enum correctly, when trying to map an integer value to MyEnum, it unexpectedly returns undefined.

const myIntValue = 1;
const myEnumValue = MyEnum[myIntValue]; // This behavior raises undefined result

var myCondition = myEnumValue === MyEnum.SomeValue; // However, this comparison wrongly evaluates to false

I am seeking assistance on how to efficiently obtain the correct Enum value in typescript during comparisons or at least make sure it works as expected in conditional statements.

Answer №1

You are presented with two choices.

Option one involves making changes to your enum.

enum MyEnum {
    Unknown = 1,
    SomeValue,
    SomeOtherValue,
}

const myIntValue = 1;
const myEnumValue = MyEnum[myIntValue]; // string

If you eliminate the value 1 from the MyEnum definition, it will commence at 0.

In my opinion, I am not in favor of this solution due to the fact that a numerical enum may not be the optimal selection.

An example to ponder:

const foo = (en: MyEnum) => 42

foo(99999) // ok

The second option is as follows.

You can associate integers with the enum using a tuple:

const enum MyEnum {
    Unknown = 'Unknown',
    SomeValue = 'SomeValue',
    SomeOtherValue = 'SomeOtherValue',
}

const MapEnum = [MyEnum.Unknown, MyEnum.SomeValue, MyEnum.SomeOtherValue] as const;

const result = MapEnum[1] // MyEnum.SomeValue

Remember, enum/object keys do not retain order, hence creating such a tuple dynamically may pose risks.

UPDATE

The second option functions although it comes with higher susceptibility to errors ...

enum MyEnum {
    Unknown = 'Unknown',
    SomeValue = 'SomeValue',
    SomeOtherValue = 'SomeOtherValue',
}

type TupleUnion<U extends string, R extends any[] = []> = {
    [S in U]: Exclude<U, S> extends never ? [...R, S] : TupleUnion<Exclude<U, S>, [...R, S]>;
}[U];

const MapEnum: TupleUnion<MyEnum> = [MyEnum.Unknown, MyEnum.SomeValue, MyEnum.SomeOtherValue,];

No chance of omitting any value

An alternative method without permutation:

enum MyEnum {
    Unknown = 'Unknown',
    SomeValue = 'SomeValue',
    SomeOtherValue = 'SomeOtherValue',
}

// credits goes to https://stackoverflow.com/a/50375286
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
    k: infer I
) => void
    ? I
    : never;

// Credits goes to https://github.com/microsoft/TypeScript/issues/13298#issuecomment-468114901
type UnionToOvlds<U> = UnionToIntersection<
    U extends any ? (f: U) => void : never
>;

type PopUnion<U> = UnionToOvlds<U> extends (a: infer A) => void ? A : never;

type IsUnion<T> = [T] extends [UnionToIntersection<T>] ? false : true;

type UnionToArray<T, A extends unknown[] = []> = IsUnion<T> extends true
    ? UnionToArray<Exclude<T, PopUnion<T>>, [PopUnion<T>, ...A]>
    : [T, ...A];

type Result = UnionToArray<MyEnum>

const MapEnum: UnionToArray<MyEnum> = [MyEnum.Unknown, MyEnum.SomeValue, MyEnum.SomeOtherValue,];

For more examples, visit my blog

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the best scenarios for creating a constructor in Angular 2 using Typescript?

Check out these sample constructors I found in the Angular 2 documentation: export class AppComponent implements OnInit { title = 'Tour of heroes'; heroes: Hero[]; selectedHero: Hero; constructor(private heroService: HeroService ...

Storing information using the DateRangePicker feature from rsuite - a step-by-step guide

Currently, I am working on storing a date range into an array using DateRangePicker from rsuite. Although my application is functioning correctly, I am encountering some TypeScript errors. How can I resolve this issue? import { DateRangePicker } from " ...

Steps for importing a CommonJS module with module.exports in Typescript

When working with ES5 code, I encountered an error that I cannot seem to resolve. Despite following the language spec and checking my TypeScript version 1.7.5, I still can't figure out why this error is occurring. Error TS2349: Cannot invoke an expre ...

Guide to setting the order of rendering in React applications

I am currently working with a .tsx file that renders two components: export default observer(function MyModule(props: MyModuleProps) { .... return ( <div> <TopPart></TopPart> <LowerPart>< ...

Encountering a challenge in Angular 8: Unable to locate a supporting object matching '[object Object]'

I am having an issue trying to retrieve the Spotify API from the current user's playlists. While I can see it in my console, when I attempt to insert it into HTML, I encounter the following error: ERROR Error: Cannot find a differ supporting object ...

Can metadata be attached to data models in Angular for annotation purposes?

Looking to add some metadata annotations to a simple data model export class Certification { title: string; certificationType?: CertificationType; validTo?: number; description?: string; externalIdentifier: Guid; constructor() { ...

A specialized HTTP interceptor designed for individual APIs

Hey there, I am currently working with 3 different APIs that require unique auth tokens for authentication. My goal is to set up 3 separate HTTP interceptors, one for each API. While I'm familiar with creating a generic httpInterceptor for the entire ...

Endpoint path for reverse matching in Mongodb API

I am currently in the process of setting up a webhook system that allows users to connect to any method on my express server by specifying a method and an endpoint to listen to (for example PUT /movies/*). This setup will then send the updated movie to the ...

Using JSDoc to Include TypeScript Definitions

I've been attempting to utilize the ts-xor package, which provides a TypeScript definition: export declare type XOR<T, U> = (T | U) extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U; This is how I'm imp ...

Angular is giving me an undefined Array, even though I clearly defined it beforehand

I've been working on integrating the Google Books API into my project. Initially, I set up the interfaces successfully and then created a method that would return an Array with a list of Books. public getBooks(): Observable<Book[]>{ ...

Objects vanish 10 seconds after appearing [Angular2, *ngFor]

My Angular2 template is quite straightforward: <span *ngFor="let item of items"> {{ item.description }} </span> Here is the TypeScript logic for it: let list = new Map(); for(let j = 0; j < 100; j++) { list.set(j, { description: j.toS ...

Guidance on specifying a type based on an enum in Javascript

I have a list of animals in an enum that I want to use to declare specific types. For instance: enum Animals { CAT = 'cat', DOG = 'dog', } Based on this Animal enum, I wish to declare a type structure like so: type AnimalType = { ...

Returns false: CanActivate Observable detects a delay during service validation

Issue with Route Guard in Angular Application: I encountered an issue with my route guard in my Angular application. The problem arises when the guard is active and runs a check by calling a service to retrieve a value. This value is then mapped to true or ...

Understanding Express JS's handling of boolean values when reading them as strings

Using axios for communication between my React app and express API has presented an unexpected issue. Before sending the data, the value is identified as a boolean (as intended), but upon receival in the API, it gets converted to and stored as a string. T ...

Having difficulty loading Angular2/ Tomcat resources, specifically the JS files

I am currently in the process of deploying my Angular2 web application on a Tomcat server. After running the ng build command, I have been generating a dist folder and uploading it to my Tomcat server. However, whenever I try to run my web app, I encounte ...

Challenges with Angular observables

Struggling to make observables work has been quite the challenge for me lately. My code now resembles a chaotic battleground rather than the organized structure it once was. The dreaded "ERROR TypeError: Cannot read property 'map' of undefined" ...

The subscription function in observables may result in values that are undefined

I integrated a new angular 2 library into my application called "angular2-grid". This library is located within the node_modules folder. Furthermore, I created a service as shown below: import { Injectable } from '@angular/core'; import { Htt ...

The Type-Fest library in TypeScript is malfunctioning when used with a constant

Currently, I am utilizing a PartialDeep feature from the library type-fest. Here is an example of how I am using it with a const: const test = { value: 1, secondLevel: { value: 1, thirdLvl: { value: 1, fifthLvl: { value: 1 ...

Develop a library of components using TypeScript and Less files

I'm currently in the process of creating a React UI library that will consist of various components such as Buttons, Inputs, textareas, etc. This library, which I've temporarily named mylib, will be reused across multiple projects including one c ...

Enhance Your NestJS Experience: Using Interceptors for Mapping and Error Handling

I'm looking for a NestJS interceptor that can log requests in all scenarios, including both successful executions and errors. Below is an example implementation: public intercept(context: ExecutionContext, next: CallHandler): Observable<any> { ...