Dynamic TypeScript property that can only be assigned values from an array during runtime

Question

Dynamic TypeScript property that can only be assigned values from an array during runtime

I'm currently struggling with specifying allowed values for a property in TypeScript.

Within my interface, I have statically typed the property like this:

interface SomeInterface{
    prop: "bell" | "edit" | "log-out"
}

However, I am looking for a way to dynamically change the list of allowed values, like so:

const list = ["bell", "edit", "log-out"]

interface SomeInterface{
    prop: list (where all values from list are allowed)
}

The challenge lies in having the list of allowed values change dynamically.

Just a heads up, this is my first time reaching out on stackoverflow. Thank you!

typescript

Answer 1

Answer №1

If you're interested in learning more about the use of const, be sure to check out this informative answer. You can also find detailed information in the official documentation.

const list = ["bell", "edit", "log-out"] as const;
interface SomeInterface{
    prop: (typeof list)[number] // a union type of the array values would be defined here
   //  it will consist of "bell", "edit", and "log-out"
}

Answer 2

If you're interested in learning more about the use of const, be sure to check out this informative answer. You can also find detailed information in the official documentation.

const list = ["bell", "edit", "log-out"] as const;
interface SomeInterface{
    prop: (typeof list)[number] // a union type of the array values would be defined here
   //  it will consist of "bell", "edit", and "log-out"
}

Answer 3

Answer №2

Ensure you utilize enum in this scenario.

Enumerations are predefined values that can be assigned to variables, enforcing strict typing. If you attempt to assign a value outside of the specified items in your enum, TypeScript will throw an error.

For your specific situation, consider implementing the following code snippet:

enum MY_ACTION_LIST {
  BELL = 'bell',
  EDIT = 'edit',
  LOG_OUT = 'log-out'
}

interface SomeInterface {
  props: MY_ACTION_LIST
}

By structuring your code in this manner, you guarantee that the props variable is restricted to only the enumerated items you have defined.

For further details, refer to this resource.

Answer 4

Ensure you utilize enum in this scenario.

Enumerations are predefined values that can be assigned to variables, enforcing strict typing. If you attempt to assign a value outside of the specified items in your enum, TypeScript will throw an error.

For your specific situation, consider implementing the following code snippet:

enum MY_ACTION_LIST {
  BELL = 'bell',
  EDIT = 'edit',
  LOG_OUT = 'log-out'
}

interface SomeInterface {
  props: MY_ACTION_LIST
}

By structuring your code in this manner, you guarantee that the props variable is restricted to only the enumerated items you have defined.

For further details, refer to this resource.

Dynamic TypeScript property that can only be assigned values from an array during runtime

Answer №1

Answer №2

Similar questions

How to pass a single property as a prop in TypeScript when working with React

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

select items using a dropdown menu in an Angular application

How can TypeORM be used to query a ManyToMany relationship with a string array input in order to locate entities in which all specified strings must be present in the related entity's column?

Create a Referral Program page within a swapping interface similar to the functionalities found in platforms like PancakeSwap, PantherSwap, and

React Traffic Light Component: Colors Stuck After Timeout

I'm working on an Angular2 project and I'm looking for a way to concatenate all my JavaScript files that were created from TypeScript in Gulp and then include them in my index

Tips for correctly decorating constructors in TypeScript

Why is it necessary to omit node_modules from webpack configuration?

The Power of Asynchronous Programming with Node.js and Typescript's Async

Filter array to only include the most recent items with unique names (javascript)

What is the best way to customize fonts for PDFMake in Angular projects?

Capturing Input Data Dynamically with Angular Forms

A Model in TypeScript

Is it necessary to include a package.json file in the /src directory when creating a package?

Using rxjs for exponential backoff strategy

Implementing Firebase-triggered Push Notifications

Display the length of the product array when I have multiple JSON objects

Ways to retrieve a URL from the assets folder

"Using the map function in Javascript to iterate through an array and then implementing