Tips for enhancing code quality and minimizing redundancies

Below is the code snippet for different classes describing models and emitters:

export class Findbyobjectidlatest {
  onChanged = new EventEmitter<Ifindbyobjectidlatest>();
  model = <Ifindbyobjectidlatest>{ pagesize: 10 };
  emit() {
    this.onChanged.emit(this.model);
  }
}

export class Findbycadnum {
  onChanged = new EventEmitter<Ifindbycadnum>();
  model = <Ifindbycadnum>{ pagesize: 10 };
  emit() {
    this.onChanged.emit(this.model);
  }
}

export class Findbycadastnumber {
  onChanged = new EventEmitter<Ifindbycadastnumber>();
  model = <Ifindbycadastnumber>{ pagesize: 10 };
  emit() {
    this.onChanged.emit(this.model);
  }
}

I am looking for suggestions on how to refactor this code as these classes are quite similar.

In addition, I have a repository class defined as:

class RepositoryModel {
   findbyobjectidlatest = new Findbyobjectidlatest();
   findbycadnum = new Findbycadnum();
   findbycadastnumber = new Findbycadastnumber();
}

To utilize this repository class, you can create an instance like this:

const repositoryModel = new RepositoryModel();

repositoryModel.findbyobjectidlatest.onChanged().pipe().subscribe();

And so forth.

Answer №1

If you're looking to implement a generic type with a base class, you can create a BaseModelEmitter class as shown below:

class BaseModelEmitter<T extends {pagesize: number}> {
  onChanged = new EventEmitter<T>();
  model = <T>{ pagesize: 10 };
  emit() {
    this.onChanged.emit(this.model);
  }
}

To utilize this, your classes can simply extend the BaseModelEmitter class like so:

export class Findbycadnum extends BaseModelEmitter<Ifindbycadnum> { }

It's important to note that any class extending the base class must implement the defined pagesize interface.

Alternatively, you can directly use the BaseModelEmitter without extension for a more straightforward approach:

findbyobjectidlatest = new BaseModelEmitter<Ifindbycadnum>();

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

Angular 6 Checkbox Selector - Filtering Made Easy

How can I filter a list of JSON objects (Products) by the 'category' variable using checkboxes? An example product object is shown below: { 'bikeId': 6, 'bikeName': 'Kids blue bike', 'bikeCode': ...

Implementing Input Filtering in Angular 2

How can I create a custom @Pipe to filter data in a table using an input tag? <tr *ngFor='let list of lists'> <td><input type="" name="" value=""></td> <td>{{ list.name }}</td> <td>{{ l ...

What is the command to activate watch mode using ngc?

In the past, using the old tsc method, I could simply call tsc -w and any changed files would be recompiled on the fly. However, with ngc, it seems that the -w flag doesn't have any effect and there is a lack of documentation on its command line argu ...

Leveraging the power of Mantine UI .tsx files in a JavaScript-oriented React application

I am currently in the process of developing a fitness website and I am interested in incorporating the Mantine UI accordion component, which is built using Typescript. My React project has been coded in JavaScript. Is there a way for me to create a .tsx fi ...

Challenges with integrating a Bootstrap 4 table into a card component

Here is a problem I am facing. It seems that the table inside the card is not displaying correctly. I want the table to be centered or at least eliminate the blank space that is currently showing. Here is my code (using Angular 6): <div class="row ...

The interface IJobDetails cannot be assigned to type null

https://i.sstatic.net/cVVSs.png In the code snippet below, I have created an interface called ClientState1. Now, I am attempting to define a constant named descriptionJobDetails with the type ClientState1, specifically for IJobDetails. However, I am encou ...

Trim excess empty sections from an Angular object

I am working on a nested object in Angular 7 and need to eliminate any empty parts: carrier:{ name:'', street:null, zip:'zip', city:'city', country:'XY', contactPerson:{ name:null, phon ...

Issue with Angular Jasmine: Unable to access property with get method

I have come across similar questions on this topic, but none of the solutions provided have resolved my issue. It seems like there may be something crucial that I am overlooking. The problem I am facing involves mocking a getter in a service. Here is the ...

"Overcoming obstacles in managing the global state of a TypeScript preact app with React/Next signals

Hello, I recently attempted to implement a global app state in Preact following the instructions provided in this documentation. However, I kept encountering errors as this is my first time using useContext and I suspect that my configuration might be inco ...

RxJS: Observable.never() acts like an eternal subscription

Currently, I am working with rxjs version 5.5.6. Below is a snippet of code that showcases a specific behavior: Observable.of(1, 2) .do(a => { console.log(a); let d:string = null; let r = d.length; // this line throws a nu ...

Typescript's puzzling selection of the incorrect overload

I have a method structured as shown below: class Bar { public executeInWorker(cb: () => void): void; public executeInWorker(cb: () => Promise<void>): void | Promise<void>; public executeInWorker(cb: () => void | Promise< ...

Error encountered while attempting to execute Typescript with tsc file.ts in the WebGL2RenderingContext

After successfully installing Typescript using both npm and yarn on my Windows 10 machine, I encountered an error when trying to run 'tsc file.ts'. The error message reads '582 declare var WebGL2RenderingContext'. The error traceback p ...

Encountering TypeScript compilation issues when trying to deploy a Node.js application on Heroku

I've been facing an issue while trying to deploy my TypeScript-based Node server on Heroku. The error I encountered during deployment is as follows: -----> Build Running build > <a href="/cdn-cgi/l/email-protection" clas ...

Obtain the reference to the child element of the nativeElement

As a newcomer to Angular, I am currently working with Angular 7. Within our project, we have implemented a button component labeled as "Send Email." When this button is clicked on the webpage where it is displayed, it triggers the default email sending win ...

The Observable<T> generic type must be provided with one type argument

I encountered the following 3 errors while working with the Angular 2 (TypeScript) code below. Can you provide suggestions on how to resolve them? import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NgModule, Com ...

Matching the appropriate data type for interface attributes

In the process of developing a module (module1), I have defined the following interface type: interface ModuleOneInterface { keyOne: customInterface; keyTwo: customInterface; keyThree: customInterface; } Now, as I work on another module (modul ...

The Vue CLI project, using Typescript, is facing challenges with building and running Mocha tests

My Vue 2 project, created using Vue CLi, is encountering numerous errors. While it compiles fine for development purposes, running unit tests or building for production results in a cascade of issues. Displayed below are some sample errors, along with sni ...

The validation for the prop 'setLoading' is not defined

Currently, I am utilizing React version 17.0.2 along with Typescript for my project. My aim is to transfer the setLoading function from the parent component (App) to the child component (About) so that the loading state within App can be altered from About ...

Tips for merging an Observable containing a series of values with an Observable containing a single value and subsequently simplifying this arrangement

I am searching for the most efficient method to combine two functions that return Observables. The initial function is described as: abstract getProfiles(): Observable<ClientProfile[]> The other one is: abstract getUser(userId: number): Observabl ...

Course completed following the module

As a newcomer to Angular, I am facing an issue with saving data in a class and reading it into a component. It seems that the component is rushing to display results before the class has finished processing them, resulting in an error message being printed ...