What is the best way to extract all Enum Flags based on a Number in TypeScript?

Question

What is the best way to extract all Enum Flags based on a Number in TypeScript?

Given:
Enum: {1, 4, 16}
Flags: 20

When: I provide the Flags value to a function

Then: The output will be an array of flags corresponding to the given Enum: [4, 16]

Note: I attempted to manually convert the Enum to an array and treat values as numbers. However, I encountered difficulties when transitioning to TS and I aim to create a function that is adaptable in case the Enum is modified. I prefer not to hardcode it. Any assistance would be greatly appreciated!

enum Enum {
    one = 1,
    four = 4,
    sixteen = 16,
}

const Flags: number = 20;

function getEnumValues(flags: number): Enum[] {
    const enumFlags = [1, 4, 16];
    
    const enums: Enum[] = [];

    enumFlags.forEach(ef => {
        if ((ef & flags) != 0) {
            enums.push(ef);
        }
    })

    return enums;
}

console.log(getEnumValues(Flags));

Solution referred from: Typescript flagged enum get values. However, this solution does not align with my Enum as it lacks sequences 2 and 8.

typescript enums

Answer 1

Answer №1

If you're worried about constantly listing the Enum values in the enumFlags array within the function, there's a way to generate them dynamically:

const enumFlags = Object.values(Enum)
    .filter((value): value is number => typeof value === "number");

It's important to use the type guard function in the filter callback (such as using a type predicate, like value is number), otherwise TypeScript might incorrectly infer the array type as (string | Enum)[]. By specifying typeof === "number", we ensure that this isn't the case.

Playground link

Sometimes it's beneficial to generate the array just once, right after defining Enum, and then reuse it rather than recreating it each time. While it does come with some cost, it's negligible (and keeping the array also incurs [minimal] memory usage).

Answer 2

If you're worried about constantly listing the Enum values in the enumFlags array within the function, there's a way to generate them dynamically:

const enumFlags = Object.values(Enum)
    .filter((value): value is number => typeof value === "number");

It's important to use the type guard function in the filter callback (such as using a type predicate, like value is number), otherwise TypeScript might incorrectly infer the array type as (string | Enum)[]. By specifying typeof === "number", we ensure that this isn't the case.

Playground link

Sometimes it's beneficial to generate the array just once, right after defining Enum, and then reuse it rather than recreating it each time. While it does come with some cost, it's negligible (and keeping the array also incurs [minimal] memory usage).

Answer 3

Answer №2

I faced a similar challenge previously and coincidentally, I happened to write an article about it because it was quite an intriguing problem.

If you're interested, you can check out the article here: https://dev.to/sincovschi/bitwise-enum-flags-to-generate-html-from-array-3576

To tackle this challenge, you'll first need a helper function that extracts Enum's flags as an array by treating TS enum as a regular object. Once you have this helper in place, you can proceed with your approach by looping through the flags and checking if they exist in your number.

The code snippet below is taken from the code sandbox linked above:

const isPowerOfTwo = (x: number): boolean => {
  return x != 0 && (x & (x - 1)) == 0;
};

export function getEnumFlags<
  O extends object,
  K extends O[keyof O] = O[keyof O]
>(obj: O): K[] {
  const isFlag = (arg: string | number | K): arg is K => {
    const nArg = Number(arg);
    const isNumber = !Number.isNaN(nArg);
    return isNumber && isPowerOfTwo(nArg);
  };

  const enumFlags: K[] = [];

  Object.keys(obj).forEach(key => {
    const nKey = Number(key);
    if (isFlag(nKey)) {
      enumFlags.push(nKey);
    }
  });

  return enumFlags;
}

Answer 4

I faced a similar challenge previously and coincidentally, I happened to write an article about it because it was quite an intriguing problem.

If you're interested, you can check out the article here: https://dev.to/sincovschi/bitwise-enum-flags-to-generate-html-from-array-3576

To tackle this challenge, you'll first need a helper function that extracts Enum's flags as an array by treating TS enum as a regular object. Once you have this helper in place, you can proceed with your approach by looping through the flags and checking if they exist in your number.

The code snippet below is taken from the code sandbox linked above:

const isPowerOfTwo = (x: number): boolean => {
  return x != 0 && (x & (x - 1)) == 0;
};

export function getEnumFlags<
  O extends object,
  K extends O[keyof O] = O[keyof O]
>(obj: O): K[] {
  const isFlag = (arg: string | number | K): arg is K => {
    const nArg = Number(arg);
    const isNumber = !Number.isNaN(nArg);
    return isNumber && isPowerOfTwo(nArg);
  };

  const enumFlags: K[] = [];

  Object.keys(obj).forEach(key => {
    const nKey = Number(key);
    if (isFlag(nKey)) {
      enumFlags.push(nKey);
    }
  });

  return enumFlags;
}

What is the best way to extract all Enum Flags based on a Number in TypeScript?

Answer №1

Answer №2

Similar questions

Dealing with implicit `any` when looping through keys of nested objects

Obtaining images from the backend within a component's TypeScript file in a MEAN stack application is a

angular 2 checkbox for selecting multiple items at once

Identifying a shift in data model within a component

What steps can I take to avoid encountering the `@typescript-eslint/unbound-method` error while utilizing the `useFormikContent()` function?

Error: The property 'children' is not found in type '{ children?: ReactNode; }'

``Are you experiencing trouble with form fields not being marked as dirty when submitting? This issue can be solved with React-H

Create multiple instances of a component in a dropdown menu using different datasets in Angular 5

Ways to access nested keys in a TypeScript object as well as an array containing objects

The issue with dispatching actions in TypeScript when using Redux-thunk

Cannot use a 'string' type expression to index a 'Request<ParamsDictionary, any, any, Query>' type

Show a nested JSON object when the specific key is not recognized

VScode has identified potential problems with modules that utilize Angular Ivy, however, this should not cause any major issues

Tips for parsing text responses in React to generate hyperlinks and emphasize specific words

Is there a way to include values in the body of an HTTP GET request using Angular?

Creating a distinct Output type in Typescript to avoid any confusion between Output arguments and Input arguments

The status of the Office.js appointment remains updated even after the saveAsync callback is executed

Why should TypeScript interfaces be utilized in Angular services for defining type information?

Conflicting events arising between the onMouseUp and onClick functions

what is the best way to eliminate comments from nested arrays when using useReducer?