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

The licensed Angular Google Map component is failing to display the map

Issue with Angular2 wysiwyg component failing to submitThe Angular2

We are considering implementing Angular 2, however our current application is built with Angular 1.x. Are there any resources available for integrating Angular 2 with Angular 1.x?

Creating tests for subscription within the onInit() method in an Angular component

Is subtyping causing issues in TypeScript's inheritance model?

When using TypeScript, it is important to ensure that the type of the Get and Set accessors for properties returning a

What could be causing the error message (No overload matches this call) to pop up when attempting to subscribe to .valueChanges() in order to retrieve data from Firestore?

The necessity of the second parameter, inverseSide property in TypeORM's configurations, even though it is optional

Tips for getting a 'yes' or 'no' response with ngx-bootstrap modal

Exploring the concept of Server-Side Rendering in AngularIO

Testing abstract class methods in Jest can ensure full coverage

What can possibly be the reason why the HttpClient in Angular 5 is not functioning properly

Error: Property 'mytest' is undefined and cannot be read

Transferring data between components in React by passing parameters through Links

Generate barcodes using Angular 2

The upcoming router is not compatible with the NextPage type

Organizing objects into arrays in Node.js

Angular 2 - One-Stop Form Component for Creating and Modifying

Having trouble with @viewChild not activating the modal popup and displaying an error message stating that triggerModal is not a function in

Transmit information from an Angular application to a Spring Boot server using a POST request