Best practice in TypeScript for handling an Enum with a switch-case to assign a variable

Question

Best practice in TypeScript for handling an Enum with a switch-case to assign a variable

Here's an issue I'm facing: I have a variable called Difficulty that is an Enum. Within a function, I need to set the configuration DifficultyConfig based on the value of Difficulty. The current solution I have in mind seems overly complicated:

 (insert modified code here)

I find the Switch case syntax to be clunky for such a straightforward task. In Scala, I would prefer something like this:

 (insert Scala equivalent code here)

Is there a similar approach in JavaScript?

javascript typescript

Answer 1

Answer №1

If there is a difference in reasoning, opt for a switch or an if/else if/else (a bit less wordy) method (more details on this below). If it pertains strictly to data like in your instance, then you could utilize a complexity-to-configuration mapping object:

const difficultyConfigs = {
    [Difficulty.NORMAL]: NormalDifficultyConfig,
    [Difficulty.HARD]: HigherDifficultyConfig,
    [Difficulty.ADVANCED]: HigherDifficultyConfig,
} as const;

You could even define that as

Record<Difficult, DifficultyConfig>

just like this, as highlighted by caTS in the comments:

const difficultyConfigs: Record<Difficult, DifficultyConfig> = {
//                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    [Difficulty.NORMAL]: NormalDifficultyConfig,
    [Difficulty.HARD]: HigherDifficultyConfig,
    [Difficulty.ADVANCED]: HigherDifficultyConfig,
} as const;

More information on that shortly, but either way, the function becomes quite simple:

function createApp(difficulty: Difficulty) {
    let difficultyConfig = difficultyConfigs[difficulty];
    
    return new App({
        difficultyConfig
    });
}

Playground links: Without Record | With Record (I also corrected some possible typos/editing mistakes in the original code.)

This approach has the added benefit that if you introduce a new Difficulty but overlook including it in difficultyConfigs, you will receive a useful compile-time error when attempting to use it. I have simulated such an error here by adding a MEDIUM difficulty but failing to update the function.

Even for logic, you can apply the same idea to construct a dispatch object:

const difficultyConfigs: Record<Difficulty, () => DifficultyConfig> = {
    [Difficulty.NORMAL]: () => { /*...build and return NORMAL config...*/ },
    [Difficulty.HARD]: () => { /*...build and return HARD config...*/ },,
    [Difficulty.ADVANCED]: () => { /*...build and return ADVANCED config...*/ },,
} as const;
// ...
const difficultyConfig = difficultyConfigs[difficulty]();

Answer 2

If there is a difference in reasoning, opt for a switch or an if/else if/else (a bit less wordy) method (more details on this below). If it pertains strictly to data like in your instance, then you could utilize a complexity-to-configuration mapping object:

const difficultyConfigs = {
    [Difficulty.NORMAL]: NormalDifficultyConfig,
    [Difficulty.HARD]: HigherDifficultyConfig,
    [Difficulty.ADVANCED]: HigherDifficultyConfig,
} as const;

You could even define that as

Record<Difficult, DifficultyConfig>

just like this, as highlighted by caTS in the comments:

const difficultyConfigs: Record<Difficult, DifficultyConfig> = {
//                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    [Difficulty.NORMAL]: NormalDifficultyConfig,
    [Difficulty.HARD]: HigherDifficultyConfig,
    [Difficulty.ADVANCED]: HigherDifficultyConfig,
} as const;

More information on that shortly, but either way, the function becomes quite simple:

function createApp(difficulty: Difficulty) {
    let difficultyConfig = difficultyConfigs[difficulty];
    
    return new App({
        difficultyConfig
    });
}

Playground links: Without Record | With Record (I also corrected some possible typos/editing mistakes in the original code.)

This approach has the added benefit that if you introduce a new Difficulty but overlook including it in difficultyConfigs, you will receive a useful compile-time error when attempting to use it. I have simulated such an error here by adding a MEDIUM difficulty but failing to update the function.

Even for logic, you can apply the same idea to construct a dispatch object:

const difficultyConfigs: Record<Difficulty, () => DifficultyConfig> = {
    [Difficulty.NORMAL]: () => { /*...build and return NORMAL config...*/ },
    [Difficulty.HARD]: () => { /*...build and return HARD config...*/ },,
    [Difficulty.ADVANCED]: () => { /*...build and return ADVANCED config...*/ },,
} as const;
// ...
const difficultyConfig = difficultyConfigs[difficulty]();

Best practice in TypeScript for handling an Enum with a switch-case to assign a variable

Answer №1

Similar questions

Tips on displaying a particular JSON attribute?

Is there a way to dynamically switch between AngularJS modules based on a configuration change?

Switch up the position of an element every time the page is refreshed

PrismaClient is currently incompatible with this browser environment and has been optimized for use in an unknown browser when performing updates

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

Error in Internet Explorer when attempting to close a Fancybox iframe that plays a YouTube video

Tips for utilizing the json_encode function with an array

Displaying PHP output within a JavaScript expression

Using Jest or Mocha alongside Vue: Uncaught SyntaxError: Cannot use import statement outside a module

Just getting started with JavaScript and running into trouble creating an array of image objects using an array of strings

End of ImageButton tag

Leverage SVGs imported directly from the node_modules directory

Error: Unable to retrieve data due to null value (property 'detail' is undefined)

How can you transform the outcome of a TYPO3 repository search into a JSON format?

Getting the length of child elements in Angular using ngFor loop

Oops! A JSON parsing error occurred due to the presence of an unexpected token '}'

Ways to transfer a v-model from the parent component to a template

The addition of days is producing an incorrect result

Utilizing a Map with Angular's ngFor

Is there a way to sort through a JSON object using JavaScript?