What is the best method to locate an element<T> within an Array[T] when <T> is an enum?

Question

What is the best method to locate an element<T> within an Array[T] when <T> is an enum?

I've recently started learning TypeScript and exploring its functionalities. I could use some assistance in deepening my understanding.

Within our angular2 application, we have defined an enum for privileges as follows:

export enum UserPrivileges{
  SUPER,
  USER,
  GUEST 
}

We utilize this type in a function definition where it is represented as an array of the enum type:

checkPrivileges(userPrivileges: UserPrivileges[]) {...}

The approach we have taken to determine user privileges is:

this.isSuperUser = userPrivileges.includes(UserPrivileges[UserPrivileges.SUPER]);

Issue

TypeScript raises an error stating that "Argument of type 'string' is not assignable to type 'UserPrivileges'" due to the use of the Array.prorotype.includes() method call (similar issue with .indexOf().)

I have attempted various forms of explicit casting without success:

this.isSuperUser = userPrivileges.includes(<string>UserPrivileges[UserPrivileges.SUPER]);
this.isSuperUser = userPrivileges.includes(UserPrivileges[UserPrivileges.<string>SUPER]);

We managed to bypass the TypeScript error by modifying the function signature to:

checkPrivileges(userPrivileges: string[]) {...}

...but this defeats the purpose of utilizing types.

This seems like a common scenario, but perhaps there's a necessary decorator or method I'm overlooking? Is there something that needs to be added to the enum type definition to allow it to be interpreted as a string?

Edit

To clarify, our backend sends privilege tokens as strings in an array, such as

userPrivileges = ["SUPER", "GUEST", "USER"]

. The UserPrivileges enum type was intended to mirror this structure.

The old method, which functioned correctly (expecting true):

userPrivileges.indexOf(UserPrivileges[UserPrivileges.SUPER]) > -1;

Because

UserPrivileges.SUPER equates to 0 (due to the emitted JS explanation)

UserPrivileges[0]</code then results in the string <code>"SUPER"

...which matches a value in userPrivileges[] from the backend.

However, these will both inaccurately (yet expectedly) return false

userPrivileges.includes(UserPrivileges.SUPER);
userPrivileges.indexOf(UserPrivileges.SUPER) > -1;

for the same reasons explained above: the server-provided userPrivileges[] does not contain a value of 0.

"Using an enum value on itself will yield back the string." In order for the suggested solution to function properly, it appears that I would need to employ the type's numeric index UserPrivileges[0] to retrieve the corresponding string for comparison with the API response?

angular typescript ecmascript-6

Answer 1

Answer №1

Instead of

UserPrivileges[UserPrivileges.SUPER]

, try using UserPrivileges.SUPER

this.isSuperUser = userPrivileges.includes(UserPrivileges.SUPER);

In TypeScript, non-const enums can map both string values to numerical values and vice versa. In JavaScript, it would look something like this:

const UserPrivileges = {
    ['SUPER']: 0,
    ['USER']: 1,
    ['GUEST']: 2,
    [0]: 'SUPER',
    [1]: 'USER',
    [2]: 'GUEST',
}

When you pass an enum value back into itself, you will receive the corresponding string. This explains why you are encountering an error when using UserPrivileges.SUPER, as it resolves to 0 which is interpreted as a string name.

Additional information has been included in this update.

To clarify, our backend returns privilege tokens as strings in an array, for example:
userPrivileges = ["SUPER", "GUEST", "USER"]

If this is the case, it seems that userPrivileges is not an Array<T extends Enum> but rather an Array<string>.

You have a couple of options at this point. You can choose to work with strings and define UserPrivileges as

const UserPrivileges = {
    ['SUPER']: 'SUPER',
    ['USER']: 'USER',
    ['GUEST']: 'GUEST',
}

Alternatively, you could convert the list of strings to a true list of enums. Operating from that list should then function as expected.

Answer 2

Instead of

UserPrivileges[UserPrivileges.SUPER]

, try using UserPrivileges.SUPER

this.isSuperUser = userPrivileges.includes(UserPrivileges.SUPER);

In TypeScript, non-const enums can map both string values to numerical values and vice versa. In JavaScript, it would look something like this:

const UserPrivileges = {
    ['SUPER']: 0,
    ['USER']: 1,
    ['GUEST']: 2,
    [0]: 'SUPER',
    [1]: 'USER',
    [2]: 'GUEST',
}

When you pass an enum value back into itself, you will receive the corresponding string. This explains why you are encountering an error when using UserPrivileges.SUPER, as it resolves to 0 which is interpreted as a string name.

Additional information has been included in this update.

To clarify, our backend returns privilege tokens as strings in an array, for example:
userPrivileges = ["SUPER", "GUEST", "USER"]

If this is the case, it seems that userPrivileges is not an Array<T extends Enum> but rather an Array<string>.

You have a couple of options at this point. You can choose to work with strings and define UserPrivileges as

const UserPrivileges = {
    ['SUPER']: 'SUPER',
    ['USER']: 'USER',
    ['GUEST']: 'GUEST',
}

Alternatively, you could convert the list of strings to a true list of enums. Operating from that list should then function as expected.

What is the best method to locate an element<T> within an Array[T] when <T> is an enum?

Answer №1

Similar questions

Having trouble compiling Typescript code when attempting to apply material-ui withStyles function

Determining when to include @types/packagename in React Native's dev dependencies for a specific package

Incorporating an alternate object array to update an array of objects: A

Personalized ornamentation using TypeScript

Checkbox selection can alternate based on conditions for formgroup controls

Avoiding caching of GET requests in Angular 2 for Internet Explorer 11

When I pass an array of objects to Firefox (using TypeScript) and retrieve the data, I find that I am unable to retrieve it in the form of an array of objects

typescript class that utilizes a function with multiple shapes (overloading) and generics

Typescript service wrapper class returning Axios HEAD request

Angular | The parameter type 'User[]' is incompatible with the expected parameter type 'Expected<User>' and cannot be assigned

Is it recommended to store SCSS and TypeScript files in the wwwroot folder in ASP.NET Core and Angular 2 development?

Guide to forming an array by extracting specific properties from a nested JSON array using javascript

Why is TypeScript giving an error about an undefined object key, even though the key was assigned a value in the previous command?

Challenges with inferring return values in Typescript generics

The triggering of routing in Next.js is not established by useEffect

What is the best way to refine React Component's props with Typescript?

Customizing TinyMCE's font style menu options

Tips on updating the datepicker format to be dd/mm/yyyy in ngbdatepicker

In Angular 16, allow only the row that corresponds to the clicked EDIT button to remain enabled, while disabling

Tips for utilizing ng class within a loop