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

How do I insert a new column into the result set of a query in Prisma?

Recording the details of an Angular project through the utilization of Compodoc

The default filter in Angular Material Autocomplete is failing to function as expected

Creating global variables in NodeJS allows you to access and modify data

What is the proper way to incorporate ts-nameof in the gulp build process and encounter the error message: 'getCustomTransformers' is a compiler option that is not recognized

Incorporating an alternate object array to update an array of objects: A

Auth0 Angular - No routes found to match

Angular 6 and the intricacies of nested ternary conditions

Angular: Preserve the URL even when encountering a 404 page

What is the best way to integrate Sass into a Create-React-App project that is using TypeScript

Encountering a Nextjs hydration issue after switching languages

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

The functionality of CSS transitions may be affected when dynamically adding a class

Arranging Select Dropdown Options in a Specific Order using Angular 7 and Typescript

Navigating with hashtags in Angular2 and anchors does not change the page position

Utilizing the power of Angular 4 in combination with mailgun

Incorporate Canvg version 4 into a TypeScript project

Issue encountered: `property does not exist on type` despite its existence in reality

Leveraging react-share in combination with react-image-lightbox

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol