What is the best way to categorize variables?

Question

What is the best way to categorize variables?

How can I organize variables together:

export let findbyc$: Observable<Object>;
export let findbyi$: Observable<Object>;
export let findbyo$: Observable<Object>;
export let findbyob$: Observable<Object>;

I would like to group them as follows:

const ChildObservers {
    export let findbyc$: Observable<Object>;
    export let findbyi$: Observable<Object>;
    export let findbyo$: Observable<Object>;
    export let findbyob$: Observable<Object>;
}

Then, at a later point in the application, I intend to use it like this: ChildObservers.findbyc$

angular typescript

Answer 1

Answer №1

If you're looking to define a set of properties that are grouped but not initialized, consider creating an interface and exporting a variable of that type.

interface ChildObservers {
    findbyc$?: Observable<Object>;
    findbyi$?: Observable<Object>;
    findbyo$?: Observable<Object>;
    findbyob$?: Observable<Object>;
}

export const observers: ChildObservers = { };

You can then initialize these properties as needed.

observers.findbyob$ = this.httpClient.get();

Additionally, I recommend making the interface generic to match the generic argument of the Observable<T>.

interface ChildObservers<TResult> {
    findbyc$?: Observable<TResult>;
    findbyi$?: Observable<TResult>;
    findbyo$?: Observable<TResult>;
    findbyob$?: Observable<TResult>;
}

export const obsersers: ChildObservers<Object> = { };

Make sure to initialize it correctly

obsersers.findbyc$ = this.http.get<Object>();

Answer 2

If you're looking to define a set of properties that are grouped but not initialized, consider creating an interface and exporting a variable of that type.

interface ChildObservers {
    findbyc$?: Observable<Object>;
    findbyi$?: Observable<Object>;
    findbyo$?: Observable<Object>;
    findbyob$?: Observable<Object>;
}

export const observers: ChildObservers = { };

You can then initialize these properties as needed.

observers.findbyob$ = this.httpClient.get();

Additionally, I recommend making the interface generic to match the generic argument of the Observable<T>.

interface ChildObservers<TResult> {
    findbyc$?: Observable<TResult>;
    findbyi$?: Observable<TResult>;
    findbyo$?: Observable<TResult>;
    findbyob$?: Observable<TResult>;
}

export const obsersers: ChildObservers<Object> = { };

Make sure to initialize it correctly

obsersers.findbyc$ = this.http.get<Object>();

Answer 3

Answer №2

export class ChildObservers {
  public constructor(private readonly httpService: HttpService){}

  public fetchDataByCategory$ = (): Observable<Object> => {
    return this.httpService.get();
  };

  public fetchDataById$ = (): Observable<Object> => {
    return this.httpService.get();
  };

  public fetchDataByOwner$ = (): Observable<Object> => {
    return this.httpService.get();
  };

  public fetchDataByObject$ = (): Observable<Object> => {
    return this.httpService.get();
  };
}

// Example for using the APIs
class MyComponent {
  public constructor(private readonly childObservers: ChildObservers){}

  public callApiFunction(){
    this.childObservers.fetchDataByCategory$.subscribe(response => {
      console.log(response);
    });
  }
}

Answer 4

export class ChildObservers {
  public constructor(private readonly httpService: HttpService){}

  public fetchDataByCategory$ = (): Observable<Object> => {
    return this.httpService.get();
  };

  public fetchDataById$ = (): Observable<Object> => {
    return this.httpService.get();
  };

  public fetchDataByOwner$ = (): Observable<Object> => {
    return this.httpService.get();
  };

  public fetchDataByObject$ = (): Observable<Object> => {
    return this.httpService.get();
  };
}

// Example for using the APIs
class MyComponent {
  public constructor(private readonly childObservers: ChildObservers){}

  public callApiFunction(){
    this.childObservers.fetchDataByCategory$.subscribe(response => {
      console.log(response);
    });
  }
}

What is the best way to categorize variables?

Answer №1

Answer №2

Similar questions

Retrieve the value of the Type Property dynamically during execution

Using an Object as a parameter in a Typescript function

Implementing a 12-month display using material-ui components

Error with object props in React using Typescript

Event for changing Ionic 2 page

Guide to integrating a component within another component

Length of Angular events

Creating a personalized menu using Nextron (electron) - Step by step guide

An effective method for targeting a specific button within a CSS file

Exploring Angular2: The Router Event NavigationCancel occurring prior to the resolution of the Route Guard

limitation on pairings of two generic types

Angular 9 - Issue with property assignment on undefined object

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

Eliminate JSON data that pertains to dates that are either in the past or future

Why does my test in Angular 2 e2e protactor fail when I do not include browser.sleep()?

How can I retrieve the value of an array using ngForm in Angular 2?

incorrect indexing in ordered list

At what point do we employ providers within Angular 2?

retrieve the preferred item data from the local storage

Encountering an "ionic 4 frame-ancestors *" error while attempting to watch a Twitter video