Typescript's array of functions

Question

Typescript's array of functions

In my code, I currently have an

engage(ability: number, opponent: Creature)

function that is responsible for executing one of three different attacks based on the ability chosen.

strike(opponent: Creature){}
claw(opponent: Creature){}
fireball(opponent: Creature){}

The issue I am facing is that the consequences of each attack method (such as the opponent dying) are repeated in my current implementation.

if(ability == 1){
   claw(opponent);
   *
   *
   lines detailing claw effects
   *
   * 
   *
}

else if(ability == 2){
   *
   *
   *
}
else {
  *
  *
  *
}

I am curious about the possibility of creating an array called attack_methods[3] which would simplify the process to define and execute attacks like this:

attack_methods[1] = strike(opponent: Creature){};
attack_methods[2] = claw(opponent: Creature){};
attack_methods[3] = fireball(opponent: Creature){};

and then call them using the following format:

engage(ability: number, opponent: Creature, attack_methods[]: DivineKnowledge){

     attack_methods[ability](Creature);
     *
     *
     *
     implications of the chosen ability
     *
     *  
     *

}

I am interested in understanding the correct way to implement this feature as I transition from programming in C to learning about TypeScript.

javascript typescript

Answer 1

Answer №1

To achieve different implementations in a clean manner, consider using a map of choices and corresponding functions.

For better readability, the type of choice will be changed from number to string.

List all the choices as follows:

const CHOICE_TACKLE: string = "TACKLE";
const CHOICE_BITE: string = "BITE";
const CHOICE_LASER: string = "LASER";

Define the functions accordingly:

const tackle = (enemy: Monstor) => { 
    /** Tackle implementation */
}

const bite = (enemy: Monstor) => { 
    /** Bite implementation */
}

const laser = (enemy: Monstor) => { 
    /** Laser implementation */
}

You can organize these functions in separate files and then import them into a single file.

Once all choices and implementations are set up, create a map like this:

const ATTACK_IMPLEMENTATIONS = {
    [CHOICE_TACKLE]: tackle,
    [CHOICE_BITE]: bite,
    [CHOICE_LASER]: laser
}

Your attack function can now be written as:

const attack = (choice: string, enemy: IMonster) => { 
    const attackFunction = ATTACK_IMPLEMENTATIONS[choice];

    if (!attackFunction) { 
        console.error(`No attack function implementation found for choice "${choice}"`);
        return;
    } 

    attackFunction(enemy);
}

Keep in mind that this method simplifies code organization. For more complex scenarios, you may want to explore the strategy pattern.

Answer 2

To achieve different implementations in a clean manner, consider using a map of choices and corresponding functions.

For better readability, the type of choice will be changed from number to string.

List all the choices as follows:

const CHOICE_TACKLE: string = "TACKLE";
const CHOICE_BITE: string = "BITE";
const CHOICE_LASER: string = "LASER";

Define the functions accordingly:

const tackle = (enemy: Monstor) => { 
    /** Tackle implementation */
}

const bite = (enemy: Monstor) => { 
    /** Bite implementation */
}

const laser = (enemy: Monstor) => { 
    /** Laser implementation */
}

You can organize these functions in separate files and then import them into a single file.

Once all choices and implementations are set up, create a map like this:

const ATTACK_IMPLEMENTATIONS = {
    [CHOICE_TACKLE]: tackle,
    [CHOICE_BITE]: bite,
    [CHOICE_LASER]: laser
}

Your attack function can now be written as:

const attack = (choice: string, enemy: IMonster) => { 
    const attackFunction = ATTACK_IMPLEMENTATIONS[choice];

    if (!attackFunction) { 
        console.error(`No attack function implementation found for choice "${choice}"`);
        return;
    } 

    attackFunction(enemy);
}

Keep in mind that this method simplifies code organization. For more complex scenarios, you may want to explore the strategy pattern.

Typescript's array of functions

Answer №1

Similar questions

Can you modify a attribute value in one HTML file from another?

What is the best way to set up a list of states in React using hooks?

Steps to successfully retrieve an image using JavaScript on the client side while circumventing any CORS errors

Using ReactJS: Injecting components and passing variables in extended components without the need for functions

Emberjs promises are enhanced with a filtering feature

Explore within the attribute of a JSON

Selector that targets an attribute in the beginning of its value [name^=value]

Using Node.js and Less to dynamically select a stylesheet source depending on the subdomain

Encountered an error with AngularJS $http.post - Unexpected token F

Creating nested objects in JavaScript can be achieved by using the reduce method to return objects in an array

Verifying numerous route paths using Vue's dynamic binding (v-bind)

Using React and graphql to show information on selected options across components

Is there a way to automatically execute this function when the React component is loaded, without the need for a button click?

Is it necessary to encapsulate Factory calls within a function in my Controller file?

Error loading jakefile: Unable to load file

Vue.js using the v-for directive with index

Objects vanish 10 seconds after appearing [Angular2, *ngFor]

JQuery Challenge: Solving Dynamic Modal Issues

Utilizing Selenium JavaScript to insert a cookie into a request

Encountering a 403 status code from the Spotify Web API while attempting to retrieve data using an OAuth 2.0 Token