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

Exploring Typescript: A guide to iterating through a Nodelist of HTML elements and retrieving their values

Could you please clarify the type of event on the onInputChange props?

Ensure that the MUI icon color is set accurately

Inform the Angular2 Component regarding the creation of DOM elements that are placed outside of the

The upload cannot be completed as the file upload is not in a multipart request format

Is Angular CLI incorrectly flagging circular dependencies for nested Material Dialogs?

What is causing the issue with TypeScript's React.createRef() and its compatibility with the material-ui Button element?

Assuming control value accessor - redirecting attention

Why aren't the child route components in Angular 6 loading properly?

Mapping the response from an http.get call to create a new typed object instance in Angular 2

While using Angular CLI on GitLab CI, an error occurred indicating that the custom rule directory "codelyzer" could not be

How to correct placeholder text display in the input of a Material UI text field

When using TypeScript, the tls.TLSSocket() function may trigger an error mentioning the absence of a "socket" parameter

Why is the selected option not visible in the Angular 8 drop-down?

How to access the result without using subscribe in Angular?

Changing Observable to Promise in Angular 2

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

The ngOnInit function is not triggered upon instantiation of an Injectable class

Can a TypeScript generator function be accurately typed with additional functionality?

Verification for collaborative element