What is the method for retrieving the index of an enum member in Typescript, rather than the member name?

Here is an example of how to work with enums in TypeScript:

export enum Category {
    Action = 1,
    Option = 2,
    RealEstateFund = 3,
    FuturesContract = 4,
    ETFs = 5,
    BDRs = 6
}

The following function can be used to retrieve the enum indexes:

export function getEnumIndexes(object: any) {
    return Object.keys(object).filter(key => !isNaN(Number(object[key])));
}

When populating an HTML select element with this enum, you may encounter a scenario where the enum member names are displayed instead of the indexes. To resolve this issue, you can use the index instead of the member name by retrieving it using the function provided above.

Answer №1

If you are dealing with the keyof issue, the following code snippet could be useful for you to refer to:

enum socialMedia {
Instagram = 1,
Facebook,
Whatsapp,
Snapchat
}
type KeyofEnum = keyof socialMedia;
function getsocialMedia(mediaOfficial: string): socialMedia {
if (mediaOfficial === 'Filters' || mediaOfficial === 'Snaps') {
return socialMedia.Snapchat;
}
}
let mediaType: socialMedia = getsocialMedia('Snaps'); // returns Snapchat
console.log('keyof enum string type Snapchat is', mediaType);

Expected Output:

The result of TypeScript's keyof operation on Enum will be 1.

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

Is there a way to define an interface that consists of child objects as the type for a function that uses destructured props?

Is there an alternative to this method? import { client } from "./setupApi"; export const getLayout = ({ page, entity, list }: {page: string, entity: string, list: string}) => { return client.get("/secure/nav.json"); }; How do I ...

What could be the reason for SVGR not producing a TypeScript declaration file in my esbuild setup?

I have been working on developing a custom SVG icon library using TypeScript. So far, the SVGR tool has been quite useful in creating components from SVG imports. However, I am encountering an issue with generating types that would allow me to pass attribu ...

The Validator in Angular Formbuilder must have a specific character requirement

Can someone help me with a regex validator pattern in Angular Formbuilder to ensure that the field CityStateZip contains at least one comma as a special character? this.editAddressForm = this.formBuilder.group({ 'CustomerName': [null, ...

The error message "The file 'environment.ts' is not located within the specified 'rootDir' directory" was encountered during the Angular Library build process

When attempting to access the environment variable in an Angular 9 library, I encountered an error during the library build process. Here is how it was implemented: import { EnvironmentViewModel } from 'projects/falcon-core/src/lib/view-models/envir ...

Simulate asynchronous function in imported module

Is it possible to monitor the behavior of an asynchronous function in a module that has been imported? jest.mock('snowflake-promise'); import { Snowflake } from 'snowflake-promise'; describe('Snowflake', () => { let sn ...

In Vue3, using the script setup feature allows for setting default property values within nested objects

I am developing a component that is designed to accept an object as a prop. In case the object is not provided, I aim to set a default value for it. <script setup lang="ts"> interface LocaleText { text: string; single?: boolean; coun ...

Add the specified HTML tag to the existing document. An error has occurred: HierarchyRequestError - The action would result in an invalid node

During my testing of a React/TypeScript project using Jest + Enzyme, I encountered an issue when trying to append an HTML tag. The error occurred with the following unit test code: const htmlTag: HTMLElement = document.createElement('html'); htm ...

Tips for integrating Tesseract with Angular 2 and above

I'm currently exploring the use of Tesseract within one of my components for OCR processing on a file. .ts: import * as Tesseract from 'tesseract.js'; fileToUpload: File = null; handleFileInput(files: FileList) { this.fileToUpload = f ...

Error Type: nextjs 13 - children function TypeError

Welcome to the Home page: export default async function Home() { # console.log(data) it is populated const { data } = getAllArts(); return ( <main className="flex min-h-screen flex-col items-center justify-between p-24"> < ...

Unable to pass response from httpclient post method to another custom function in Angular 4

I've implemented the addUser(newUser) function in my sign-in.service.ts file like this: addUser(newUser) { const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; let body = JS ...

Combining the Partial<CssStyleDeclaration> union type with a dictionary can lead to potential typing complications when the implicit any flag is

Using VueJS v-bind:style binding makes it possible to set CSS variables. I am attempting to create a union type that allows for the object passed to v-bind:style to retain typings for CssStyleDeclaration, while also being relaxed enough to accept an arbitr ...

What is the method for incorporating sorting into a mat-list?

I've searched for various solutions, but none seem to work with mat-list. It's crucial for me because mat-list is the only solution where drag&drop functionality works (I always face this issue with mat-table in tables and I can't find a ...

The argument provided, 'Item', cannot be assigned to the parameter, 'string'. TS2345 error encountered

Encountering an issue with type 'string'. Error code TS2345 Problem: Argument of type 'Item' is not compatible with parameter of type 'string'. TS2345 filter(resortList:ResortResult[], selectedFilters:SelectedFilters) { ...

Swap out the traditional for loop with a LINQ query utilizing the any method

In my TypeScript code, I have the following snippet: public executeTest(test: Test): void { const testFilters: Record<string> = getTestFilters(); let isTestingRequired: boolean = false; for (let i: number = 0; i < testFilters.leng ...

Tips for utilizing a formatter with a Doughnut chart in Angular using Chart.js

When using Chart.js with AngularJS, I tried to display numbers or percentages in a doughnut chart using a formatter. However, it did not work as expected. Here is how I implemented it in my HTML: <canvas baseChart class="chart" [data]="do ...

Dismiss the validator upon completion of submission

Two textboxes were created, one for the title and another for the name. Validations have been implemented to only submit information if both textboxes are filled. The issue arises when attempting to clear the variable values after submission, triggering ...

Unable to render React component after updating its state

After successfully retrieving data from my API, React is failing to render the cards. export default function Subjects() { const userApi = useUserService(); const auth = useRecoilValue(AuthAtom); const [loading, setLoading] = React.useState<boolea ...

Limit pasted content in an Angular contenteditable div

Is there a way to limit the input in a contenteditable div? I am developing my own WYSIWYG editor and want to prevent users from pasting content from external websites and copying styles. I want to achieve the same effect as if the content was pasted into ...

NGRX reducer avoids generating errors due to incorrect assignments

My experience with ngrx is relatively new. In my typical TypeScript work, I usually encounter an incorrect assignment error like the one below due to a missing property in the interface declaration: interface IExample { count: number; } let initialState ...

Reactivity in Angular Autocomplete with API Integration

I went through all the tutorials on Angular Autocomplete using API to follow the steps. I implemented valueChanges to monitor the form control, used switchMap to send a new request with each keyword change, and then displayed the data in the autocomplete d ...