Creating an array using an enumeration

Question

Creating an array using an enumeration

I've been facing challenges trying to pinpoint the root cause of the issue with this code. It would be greatly appreciated if someone could shed light on what is triggering the problem and possibly suggest a solution.

Within my application, I am attempting to utilize an enum to outline the routes employed by a router. While it was successful in certain scenarios, for some reason, in the current context where I am implementing the enum, it is not functioning as expected.

In instances where it works correctly, the code may resemble the following:

history.push(routes.testPage)

In contrast, when it fails to work, it resembles something like this:

const enum routes {
    index = '/',
    testPage = '/test',
}

const adminRoutes = [
    routes.testPage,
];

const routeIsAdmin = (route: string) => adminRoutes.indexOf(route) > -1;

The specific error message I receive in this scenario reads:

Argument of type 'string' is not assignable to parameter of type 'routes'

I've created an example of this code on the TypeScript playground.

Would appreciate any insights or explanations regarding this matter?

Edit

To provide further clarity, adding any string to the array adminRoutes resolves the issue without any complications. However, this workaround is not ideal, but it might offer some insight into the underlying problem.

typescript

Answer 1

Answer №1

Enum arrays cannot be constructed from enums themselves. Enums are essentially lost during the transpilation process and exist only for checking purposes. In the generated code, they appear as strings but are referenced by their values.

In this particular scenario, you could simply convert them to strings using route as string.

const routeIsAdmin = (route: routes) => {
    adminRoutes.indexOf(route as string) > -1;
}

However, relying on direct links between routes and paths may not be ideal in terms of design.

In essence, enums should be viewed as distinct instances of a concept with no intrinsic value attached. If your enum behavior would not change if the underlying string values were replaced with numbers, then perhaps it is not the most appropriate approach.

From my perspective, rather than enums, utilizing a list of actual strings might be more semantic.

const routes = {
    index: '/',
    testPage: '/test',
};

const adminRoutes = [
    routes.testPage,
];

const routeIsAdmin = (route: string) => adminRoutes.indexOf(route) > -1;

This way, operations like Object.keys(routes) can still be performed.

Answer 2

Enum arrays cannot be constructed from enums themselves. Enums are essentially lost during the transpilation process and exist only for checking purposes. In the generated code, they appear as strings but are referenced by their values.

In this particular scenario, you could simply convert them to strings using route as string.

const routeIsAdmin = (route: routes) => {
    adminRoutes.indexOf(route as string) > -1;
}

However, relying on direct links between routes and paths may not be ideal in terms of design.

In essence, enums should be viewed as distinct instances of a concept with no intrinsic value attached. If your enum behavior would not change if the underlying string values were replaced with numbers, then perhaps it is not the most appropriate approach.

From my perspective, rather than enums, utilizing a list of actual strings might be more semantic.

const routes = {
    index: '/',
    testPage: '/test',
};

const adminRoutes = [
    routes.testPage,
];

const routeIsAdmin = (route: string) => adminRoutes.indexOf(route) > -1;

This way, operations like Object.keys(routes) can still be performed.

Creating an array using an enumeration

Answer №1

Similar questions

Using subscribe method to return an observable within a function

What is the process for ensuring that the "ng-multiselect-dropdown" is a mandatory field within Angular 7?

Issue: formGroup requires an input of type FormGroup. Please provide one; Error: Unable to access property 'controls' as it is undefined

Utilizing Angular to convert a string array into an array of enum values through an HTTP GET request

TypeScript's TypeGuard wandering aimlessly within the enumerator

What is the best way to write a function in typescript that verifies whether the argument extends a type argument and then returns the argument?

Best practice for spreading computed values in Angular 2

Having trouble retrieving the JSON data from the getNutrition() service method using a post request to the Nutritionix API. Just started exploring APIs and using Angular

What is the best way to enable code sharing between two TypeScript projects housed within the same repository?

What setting should I adjust in order to modify the color in question?

Dynamic autocomplete in Oclif utilizing an HTTP request

Refresh Information Stripe

Decorators are not allowed in this context, the Angular component constructor may not include them

Working with Vue class-based components in TypeScript and setting props

What is the reason behind the lag caused by setTimeout() in my application, while RxJS timer().subscribe(...) does not have the same

Comparing two string dates in mongoose: A guide

Tips for implementing pagination on a large JSON file without traditional pagination controls

Angular 2: Issue with data table not updating after item deletion

Utilize TypeScript generics in Vue mixins by incorporating them into class components

What is the best way to execute an asynchronous request within a CanDeactivateFn guard in Angular?