What design should be used for a class with two interconnected attributes?

I am looking to develop a customizable macro item that can be edited by the user.

Each macro item will have a defined type and event value.

There are three types of items: pressKey, releaseKey, and delayInMs.

For pressKeyEvent and releaseKeyEvent, I want users to only be able to select a key object as the event value.

For delayEvent, users should only be able to select an integer as the event value.

Currently, this is what I have:

export enum MacroEventEnum {
    pressKey,
    releaseKey,
    delayInMs
}

export class MacroItem {
    // Represents the type of the macro event
    public macroEvent: MacroEventEnum;
    // Represents the value associated with the macro event
    public macroEventValue: any;

    constructor(macroEvent: MacroEventEnum, macroEventValue: any) {
        this.macroEvent = macroEvent;
        this.macroEventValue = macroEventValue;
    }
}

The issue arises when the user changes the macroEvent type to pressKey but can still input a time as the macroEvent value.

What kind of design pattern would be most suitable in this scenario considering that the user can frequently change the macroEvent?

Thank you for your insights :)

Answer №1

To establish a structured system of classes, it is imperative to create the following hierarchy: MacroItem, KeyMacroItem, and DelayMacroItem. In this structure, both KeyMacroItem and DelayMacroItem inherit attributes and properties from MacroItem.

MacroItem possesses the macroEvent attribute, while KeyMacroItem includes the additional keyObject attribute, and DelayMacroItem incorporates the extra delayValue attribute. By implementing a virtual method in MacroItem that can be customized in KeyMacroItem and DelayMacroItem, each subclass can execute operations specific to their individual requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

No directives are offering the FormControl

Having trouble with directives and FormControl... I'm facing a challenge while trying to incorporate an autocomplete feature into my input field. I have followed the angular-material guide closely by copying and pasting their TypeScript and HTML code ...

Having trouble correctly inputting the HOC function that accepts a custom property key

Here is a demonstration of an HOC function that takes a component and a property key, injecting a value at the specified property key: import * as React from 'react' type WrappedComponentProps<PropertyKey extends string> = { [k in Proper ...

Declaration files for Typescript ESLint configurations

I've been researching this issue online, but I haven't been able to find any solutions. It could be because I'm not entirely sure what's causing the problem. What I'm trying to do is set a global value on the Node.js global object ...

How to manage multiple sockets within a single thread using ZeroMQ.js

Currently, I am in the process of setting up a service using ZeroMQ in conjunction with Node.js. Utilizing the ZeroMQ.js package for this purpose. Reference can be found in The ZeroMQ Guide, which outlines how to manage multiple sockets within a single ...

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

Creating Nest.js dependency tree for standalone executable script (without hosting server)

Can a service be run in an executable file? I want to streamline the process of "bootstrapping" a module and calling a service method directly const userService = new UserService() userService.find(1).then(console.log) However, all dependencies would ne ...

What is the best way to retrieve all keys from a deeply nested object using recursion

type NestedObject = { amount: number, error: string | null, data: { rows: [], messages: { goodNews: string | null, badNews: string | null } } } //attempting to recursively retrieve all keys type AllKeys<T, K extends keyof T> = T e ...

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

Overflow issue occurs in react-bootstrap when a Table is placed within the Card.Body

Looking to design a responsive table with a row details section inside a card using react bootstrap. I have applied different colors to the sections for better visual understanding. However, I am facing an issue where the card body slightly overflows the ...

A step-by-step guide on updating a deprecated typings package manually

Currently, I am developing a NodeJS application using TypeScript and incorporating numerous Node packages. However, not all of these packages come with TypeScript definitions, so Typings is utilized to obtain separate definition files. During the deployme ...

Angular 8 shows an error message stating "Unknown Error" when making a REST API request

My goal is to retrieve data from the server using a REST API service. The code snippet below is from my service.ts file: getCategories(): Observable<Category> { const httpOptions = { headers: new HttpHeaders({ 'Content-Type&a ...

Navigating the return types of Array shifts in Typescript 2.0 with rigorous null checks

In my project using Typescript 2.0 with strict null checks, I am working with an array: private _timers: ITimer[] and have the following if statement: if(this._timers.length > 0){ this._timers.shift().stop(); } However, I encounter a compile error ...

Employing a dynamic return type based on a boolean parameter

In the process of developing a library, I am seeking to enhance the accuracy of the Types provided. This would ensure that users of the library are unable to select the incorrect type in a scenario like the one outlined below. The function described here ...

When using Typescript, the keyof operator for objects may not undergo refinement and can result in error

I've been working on creating a function that validates whether a key in an object is a non-empty string. export const validateRequiredString = <T>( obj: T, key: keyof T & (string | number) ): void => { if (typeof obj[key] !== " ...

Encountering issues with verifying login credentials in Angular 2

Greetings! I have designed a login page where the user will be logged in if the response is successful, otherwise an error message will be displayed. Below is the JSON data with email and password fields: { Email": "<a href="/cdn-cgi/l/email-protect ...

Encountering an issue while trying to compile my Angular 6 project - an ERROR keeps

Upon initiating my project with ng serve, I encountered a troublesome error. Despite updating my TypeScript, the issue persisted. Here is the detailed error message: ERROR in node_modules/@types/node/assert.d.ts(3,68): error TS1144: '{' or ...

Using type as an argument in a hook in a similar fashion to how it is

My custom hook utilizes Zustand and is capable of storing various data types. However, I am looking to specify the type of data that will be stored similar to how it is done with the useState hook. import { Profile } from "@/types"; import { crea ...

Unlock the potential of Power BI with this step-by-step guide on enhancing the Circle Card visual by incorporating unique formatting

Power BI Tutorial: Adding Formatting Options to the Circle Card Visual After completing step 8, I copied the code into my VS Code and encountered 2 error messages: Error message: "import VisualSettings - Module '"./settings"' has no e ...

Looking for giphy link within a v-for loop (Vue.js)

I am fetching a list of movie characters from my backend using axios and rendering them in Bootstrap cards. My objective is to search for the character's name on Giphy and use the obtained URL as the image source for each card. However, when I attemp ...

How to extract the chosen option from a bound list within an Angular application

Our goal is to avoid using 2-way binding in our component setup: <select type="text" formControlName="region" (change)="regionChanged($event)"> <option *ngFor="let region of regionsDDL" [ngValue]="region">{{region.name}}</option> ...