What is the process for inputting a fixed value using functions defined by strings?

Question

What is the process for inputting a fixed value using functions defined by strings?

Imagine you have the following TypeScript snippet:

enum EVENT {
  FIRST_EVENT = "game:first_encounter",
}

const EventHandler: keyof typeof EVENT = {
    [EVENT.FIRST_EVENT]: (data: any) => {
        console.log(`Hello there, ${data.blue_player}`);
    }
}

const data = { blue_player: 'Blue McBlue', event: EVENT.FIRST_EVENT}
const eventName: EVENT = data.event;

EventHandler[eventName](data);

An issue arises with EventHandler at the top.

Type '{ "game:first_encounter": (data: any) => void; }' is not assignable to type '"FIRST_EVENT"'

Another error occurs with eventName on the last line stating:

Element implicitly has an 'any' type because index expression is not of type 'number'

If you are curious about a solution, check out this link: Click here

Do you see what's going on? How can I properly define the types in this code?

javascript typescript

Answer 1

Answer №1

Let's dive into the world of EventHandler and solve this puzzle together.

Firstly, it's crucial to understand that it manifests as an object:

type EventHandlerType = {};

Each key within it corresponds to different EVENTS:

// Defining a mapped type that links events to any value
type EventHandlerType = { [e in EVENT]: any }

Every entry is essentially a function that takes a data input and outputs void:

// Establishing a mapped type relating events to values with specific functions
type EventHandlerType = { [e in EVENT]: (data: any) => void };

This structure seamlessly integrates into your project code:

const EventHandler: { [key in EVENT]: (data: any) => void } = {
    [EVENT.FIRST_EVENT]: (data: any) => {
        console.log(`Greetings, ${data.blue_player}`);
    }
}

To simplify this process, leverage the utility type Record tailored for such scenarios:


const EventHandler: Record<EVENT, (data: any) => void> = {
    [EVENT.FIRST_EVENT]: (data: any) => {
        console.log(`Greetings, ${data.blue_player}`);
    }
}

Refer to mapped types in the documentation for additional examples and detailed insights.

Answer 2

Let's dive into the world of EventHandler and solve this puzzle together.

Firstly, it's crucial to understand that it manifests as an object:

type EventHandlerType = {};

Each key within it corresponds to different EVENTS:

// Defining a mapped type that links events to any value
type EventHandlerType = { [e in EVENT]: any }

Every entry is essentially a function that takes a data input and outputs void:

// Establishing a mapped type relating events to values with specific functions
type EventHandlerType = { [e in EVENT]: (data: any) => void };

This structure seamlessly integrates into your project code:

const EventHandler: { [key in EVENT]: (data: any) => void } = {
    [EVENT.FIRST_EVENT]: (data: any) => {
        console.log(`Greetings, ${data.blue_player}`);
    }
}

To simplify this process, leverage the utility type Record tailored for such scenarios:


const EventHandler: Record<EVENT, (data: any) => void> = {
    [EVENT.FIRST_EVENT]: (data: any) => {
        console.log(`Greetings, ${data.blue_player}`);
    }
}

Refer to mapped types in the documentation for additional examples and detailed insights.

What is the process for inputting a fixed value using functions defined by strings?

Answer №1

Similar questions

How can the size of the font in a <div> be adjusted based on the number of characters present?

Issue with Heroku deployment: unable to locate JavaScript file

"Customize your search experience with a bootstrap search bar featuring multiple input fields

Loop through the JSON data to obtain distinct values for certain indices

What is the best way to save and retain cache data for an audio file?

Learn how to implement pagination in your React Native app by utilizing the orderByChild, equalTo, and endBefore functions in a Firebase

Executing the calling statement once all function statements have been completed

Best practices for utilizing dotenv / .env to pass parameters in typescript

Creating a fresh occurrence of a variable type in JavaScript

Tips for altering the color of the MUI table sort label icon:

Incorrect conditions when attempting to compare text strings

Nodejs script designed to efficiently download all files from an FTP server to a local directory before seamlessly transferring them to another FTP folder

Transitioning from checkbox to input field and updating the button through Ajax in a WordPress site

Evaluating the functionality of express.js routes through unit testing

What could be causing the issue with my Mongoose One-To-Many Relationships not linking correctly?

Error: Cloudant encountered a problem processing your request

I rely on JqTouch for my mobile web development, but I've noticed a strange behavior: whenever I refresh a page that isn't the homepage and then navigate back,

Is there a way to display an animation when a page loads using jQuery that only plays for index.php and not other_page.php?

Issue with Node.js connection to MySQL database resulting in timeout error (ETIMEDOUT)

Optimal method for managing errors in Flask when handling AJAX requests from the front end