What causes Enum[Enum.member] to be undefined in the TypeScript playground on codepen.io?

My intention was to test out some type settings on TypeScript playground at codepen.io, but I encountered an unexpected issue:

enum Order {
  Asc = 'asc',
  Desc = 'desc'
}

console.log(Order[Order.Asc]); // undefined in codepen.io playground

Usually, when compiled with webpack or other tools, it correctly displays "Asc".

Answer №1

Referencing information from https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings

When an enum is compiled, it creates an object that holds mappings in both directions (name -> value and value -> name). [...]
It's important to note that string enum members do not have a reverse mapping generated.

The example below illustrates how reverse mapping functions with numbers:

enum Priority {
  High,
  Low
}

Priority.High // 0
Priority[Priority.High] // "High"

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

Receiving a SyntaxError in Node.js with the message "Unexpected token *" while attempting to import

node: v10.16.3 npm: 6.12.0 Encountered an error while trying to import express in node. Referencing the code from https://github.com/angular-university/rxjs-course, specifically server/server.ts. To run server.ts, used the following command: $ ts-node ...

Each property of an object has its own unique key, yet they all share the same data type

I have a single-use object with only three properties, all of which should be of the same type. The code below currently achieves this, but I'm curious if there is a more efficient way to declare the type for timingsObject: let timingsObject: ...

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

Just starting out with Angular and curious about the alternative for $filter('orderBy') that is used in an AngularJS controller. AngularJS example: $scope.itemsSorted = $filter('orderBy')($scope.newFilteredData, 'page_index&apos ...

Hand over the component method as an argument to a class

One of my components, called First, is responsible for creating a new instance of a Worker class. During the creation process of this class, I intend to pass the Read method as a callback method. Once this class completes its task, it will then invoke thi ...

Access basePath within the Next.js AppRouter

Is there a way to access the basePath in Next.js 13 when using AppRouter? To retrieve it, we can simply get router.basePath through the useRouter hook of PageRouter by importing `import { useRouter } from 'next/router' I am currently unable to ...

Using a generic name as a JSON key in a TypeScript file

I received data from an API call const tradingApiResponse = { Timestamp: "2024-01-15T12:00:00", Ack: "Success", Version: 1, Build: "1.0.0", UserDeliveryPreferenceArray: { NotificationEnable: [ { EventType: ...

How can a button click function be triggered in another component?

These are the three components in my dashboard.html <top-nav></top-nav> <sidebar-cmp></sidebar-cmp> <section class="main-container" [ngClass]="{sidebarPushRight: isActive}"> <router-outlet></router-outlet> & ...

Recursive array generation

Given an array 'featureList', the goal is to create a new array 'newArray' based on a specific ID. For example, for ID 5, the newArray would be ['MotherBoard','Antenna','Receiver'], where Receiver correspon ...

An interface that is extended by an optional generic parameter

I currently have an exported abstract class that has one generic. However, I now require two generics. I do not want to modify all existing classes that are using this class. Therefore, I am looking to add an optional generic class that extends an interfac ...

The parameter type cannot be assigned an undefined argument

I am new to TypeScript and trying to check if an item already exists. However, when I define the previous variable, I'm encountering an error: "Argument of type '(prev: CartItemsType[]) => CartItemsType[] | undefined' is not assignable to ...

Creating a dynamic array in an Angular 2 service for real-time changes monitoring by a component

I am facing an issue where my NotificationsBellComponent is not receiving changes to the array in the service even though the _LocalStorageService is returning data correctly. Q) How can I ensure that my component receives updates when the service collect ...

What are the benefits of adding member functions to the data structures of React.js store?

Using React.js and Typescript, I store plain Javascript objects in the React.js store. These objects are sometimes received from the server without any member functions, but I wish to add functions for better organization. Instead of having to rely on exte ...

Getting a date object that is three months prior to the current date in Typescript

I need to retrieve the date object that is 3 months before the current date by using the following code snippet: toDate = new Date(); fromDate = this.toDate.getMonth() - 3; The issue I am facing is that the variable fromDate only contains a number, but I ...

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Lately, I've been working on creating a type library for a JavaScript written library. As I was defining all the namespaces, classes, and interfaces, I encountered an error TS2417 with some of the classes. I double-checked for any issues with method o ...

Tips for creating a sophisticated state transition diagram using Typescript

If you have a creative idea for a new title, feel free to make changes! I have two enums set up like this: enum State { A = "A", B = "B", C = "C" } enum Event { X = "X", Y = "Y", Z ...

Troubleshooting form submission issues in Angular 4

I am encountering a few issues with my search form. It is supposed to function as a search tool with one input field and one button. However, something seems amiss. I am utilizing an API that returns values based on the string inputted. When an empty value ...

Utilize JQuery to choose the angular element

Can Angular tags be selected using JQuery? I am currently utilizing the ui-select Angular component, which is integrated into the HTML page as shown below: <ui-select ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)"> & ...

Issue with react router v6: Component fails to render even though route has been changed

The router seems to be experiencing an issue where it does not render a component. Specifically, on the home page, the Private Route is only rendered once. Clicking on a NavLink changes the URL to "/agreements", but the component itself is not being render ...

The use of `super` in Typescript is not returning the expected value

Trying to retrieve the name from the extended class is causing an error: Property 'name' does not exist on type 'Employee'. class Person { #name:string; getName(){ return this.#name; } constructor(name:string){ ...

What is the best method for choosing visible elements within a scrollable container?

Is there a way to retrieve the list of visible elements within a scrollable container? The number of elements that are visible on the screen changes as one scrolls, making it challenging to add a specific class to only the last two visible elements. Any s ...