Creating an enum type array in TypeScript

Question

Creating an enum type array in TypeScript

I have developed a Typescript DTO to ensure type safety for a list of strings generated from an enum type.



export class ConnectedUserWithPhotosDTO extends UserWithPhotosDTO {
  userTags: keyof User["userTags"][]

  constructor(user: User, photos: ResponsePhotoDTO[]) {
    super(user, photos)
    console.log(user.userTags)
    this.userTags = user.userTags;
  }
}

The typescript compiler is throwing an error:

Type 'UserTags[]' cannot be assigned to type 'number | keyof UserTags[][]'.

It seems that the value of userTags is

number | keyof UserTags[][]

This is the enum definition I am working with.

export enum UserTags {
  FITNESS = 'Fitness',
  FOURTWENTY_FRIENDLY = '420 Friendly',
  MEDITATION = 'Meditation',
  DRINKS = 'Drinks',
  DOGS = 'Dogs',
  CATS = 'Cats',
  FASHION = 'Fashion',
  WINE_TASTING = 'Wine Tasting',
  FOODIE = 'Foodie',
  ART = 'Art',
  PARTYING = 'Partying',
  TRAVELIING = 'Travelling',
  GAMING = 'Gaming',
}

In the User class, UserTags is defined as:

 @ApiProperty({ enum: UserTags, isArray: true, default: [] })
  @Column('enum', { enum: UserTags, array: true, nullable: true, default: [] })
  userTags: UserTags[]

How can I specify just the type of keyof for a particular Enum value?

typescript

Answer 1

Answer №1

If we consider UserTags as an enum, the implementation could resemble this:

userTags: Array<keyof typeof UserTags>

Answer 2

If we consider UserTags as an enum, the implementation could resemble this:

userTags: Array<keyof typeof UserTags>

Answer 3

Answer №2

Another way to achieve this is:

let userTags: User['tags'];

Answer 4

Another way to achieve this is:

let userTags: User['tags'];

Answer 5

Answer №3

Your explanation is a bit perplexing due to the usage of keyof. It's unclear whether you are referring to the enum keys like "FITNESS", or the enum values such as "Fitness".

From the code snippet of the User and the error message, it appears that when you access user.userTags, you are retrieving the enum values. The type of these values corresponds to the enum itself, so the correct declaration would be:

userTags: UserTags[]

This aligns with the type in the User since we are assigning the userTags property based on User["userTags"].

Let's analyze the type

keyof User["userTags"][]

that was attempted and understand its interpretation.

User["userTags"] provides us with the userTags property of the User type. Based on your User code, User["userTags"] equals UserTags[], which represents an array of values from the UserTags enum, like

["Fitness", "Fashion"]

.

User["userTags"][] denotes our intention for an array of these values. However, it's already an array, leading to a request for an array of arrays of enum values: UserTags[][], resulting in

[["Fitness"], ["Fashion", "Foodie"]]

.

keyof User["userTags"][]

signifies a desire for the keys of that array of arrays: keyof UserTags[][]. As the key of an array is a number, TypeScript returns number | keyof UserTags[][] (though it should just be number).

You might have intended to obtain the keys for the UserTags enum object. Using keyof typeof UserTags will yield the union type

"FITNESS" | "FOURTWENTY_FRIENDLY" | "MEDITATION" ...

. However, this may not align with your actual requirement, as what you seek is the union of the enum values provided by UserTags.

Answer 6

Your explanation is a bit perplexing due to the usage of keyof. It's unclear whether you are referring to the enum keys like "FITNESS", or the enum values such as "Fitness".

From the code snippet of the User and the error message, it appears that when you access user.userTags, you are retrieving the enum values. The type of these values corresponds to the enum itself, so the correct declaration would be:

userTags: UserTags[]

This aligns with the type in the User since we are assigning the userTags property based on User["userTags"].

Let's analyze the type

keyof User["userTags"][]

that was attempted and understand its interpretation.

User["userTags"] provides us with the userTags property of the User type. Based on your User code, User["userTags"] equals UserTags[], which represents an array of values from the UserTags enum, like

["Fitness", "Fashion"]

.

User["userTags"][] denotes our intention for an array of these values. However, it's already an array, leading to a request for an array of arrays of enum values: UserTags[][], resulting in

[["Fitness"], ["Fashion", "Foodie"]]

.

keyof User["userTags"][]

signifies a desire for the keys of that array of arrays: keyof UserTags[][]. As the key of an array is a number, TypeScript returns number | keyof UserTags[][] (though it should just be number).

You might have intended to obtain the keys for the UserTags enum object. Using keyof typeof UserTags will yield the union type

"FITNESS" | "FOURTWENTY_FRIENDLY" | "MEDITATION" ...

. However, this may not align with your actual requirement, as what you seek is the union of the enum values provided by UserTags.

Creating an enum type array in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

The issue arises when trying to access the 'addCase' property on the type 'WritableDraft<search>' within the builder argument of extra reducers

Typescript conditionally mandatory arguments

typescript add some flair to the setter function

Importing node_modules in Angular2 using TypeScript

Updating and Preserving Content in Angular

Cypress automation script fails to trigger Knockout computed subscription

Altering or including new space variables within a custom Chakra-ui theme

Converting Celsius to Fahrenheit using AngularJS

Combining and grouping objects by their IDs in a JavaScript array

Download a collection of base64 images as a ZIP file in Angular 4

Conflicting TypeScript errors arise from a clash between React version 16.14 and @types/hoist-non-react-statics 3.3.1

Using useState as props in typescript

What is the reason for a boolean extracted from a union type showing that it is not equivalent to true?

Array containing multiple service providers in Angular

Encountering an HTTP parsing failure while sending XML through Angular 5's HttpClient

Guide to setting up an interface-only project (along with its dependent projects) on NPM

Rx.js struggles to access historical values

`Angular 9 template directives`

Limitations of MaterialUI Slider

Leverage the power of mathematical functions within Angular to convert numbers into integers