Improving redundant code in Angular TypeScript

Question

Improving redundant code in Angular TypeScript

I'm facing a challenge with refactoring duplicated code in my project and I'm not sure where to start.

There are two methods in my code that essentially perform the same task by calling the same service (due to pagination requirements), but this repetition is making it messy. How can I improve this situation?

    getStockData(id: string): Observable<{
    searchResult: IStockResult[];
    searchCount: number;
}> {
    return this.service
        .search(
            id,
            this.service.getSearchMetaDefaults()
        )
        .pipe(
            map(response => {
                return {
                    searchResult: response, 
                    searchCount: response.meta.totalResourceCount
                };
            })
        );

angular typescript refactoring

Answer 1

Answer №1

There might be numerous sophisticated solutions to the posed query. Here are some swift tweaks I could suggest:

Create distinct types for the utilized objects (for example, using TypeScript interfaces)

export interface ISearch { 
  searchResult: IStockResult[]; 
  searchCount: number; 
}

export interface IMeta {
  pagination: {
    size: number;
    index: number;
  },
  sorting: {
    order: string;
    attribute: string;
  }
}

Define possible parameters with ?: and pass the argument as an object utilizing the specified types.

getData(id: string, meta?: IMeta): Observable<ISearch>

Hence, the previous calls would transform into

getStockData('some id') -> getData('some id')

paginate(1, 3, 'some id', 'some order', 'some attr') ->

const meta: IMeta = {
  pagination: {
    size: 3,
    index: 1
  },
  sorting: {
    order: 'some order',
    attribute: StockMapper.getDataForSorting('some attr')
  }
};

getData('some id', meta);

Verify if the optional parameter is defined utilizing the nullish coalescing operator (??) before utilization.

const meta = meta ?? this.service.getSearchMetaDefaults();

Merging all components together

getData(id: string, meta?: IMeta): Observable<ISearch> {
  const meta = meta ?? this.service.getSearchMetaDefaults();

  return this.service.search(id, meta).pipe(
    map(response => ({
      searchResult: StockMapper.fromStockResource(response),
      searchCount: response.meta.totalResourceCount
    } as ISearch))
  );
}

Answer 2

There might be numerous sophisticated solutions to the posed query. Here are some swift tweaks I could suggest:

Create distinct types for the utilized objects (for example, using TypeScript interfaces)

export interface ISearch { 
  searchResult: IStockResult[]; 
  searchCount: number; 
}

export interface IMeta {
  pagination: {
    size: number;
    index: number;
  },
  sorting: {
    order: string;
    attribute: string;
  }
}

Define possible parameters with ?: and pass the argument as an object utilizing the specified types.

getData(id: string, meta?: IMeta): Observable<ISearch>

Hence, the previous calls would transform into

getStockData('some id') -> getData('some id')

paginate(1, 3, 'some id', 'some order', 'some attr') ->

const meta: IMeta = {
  pagination: {
    size: 3,
    index: 1
  },
  sorting: {
    order: 'some order',
    attribute: StockMapper.getDataForSorting('some attr')
  }
};

getData('some id', meta);

Verify if the optional parameter is defined utilizing the nullish coalescing operator (??) before utilization.

const meta = meta ?? this.service.getSearchMetaDefaults();

Merging all components together

getData(id: string, meta?: IMeta): Observable<ISearch> {
  const meta = meta ?? this.service.getSearchMetaDefaults();

  return this.service.search(id, meta).pipe(
    map(response => ({
      searchResult: StockMapper.fromStockResource(response),
      searchCount: response.meta.totalResourceCount
    } as ISearch))
  );
}

Improving redundant code in Angular TypeScript

Answer №1

Similar questions

Tips for triggering a click event automatically after a 2-minute delay in ReactJS using TypeScript

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

The specified file 'node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.d.ts' cannot be treated as a module

Benefits of Angular Signals - Why is it advantageous?

It's conceivable that the item is 'null'

Encountering difficulties accessing props while invoking a component in React

Steps for building a custom component using MUI as a foundation

Stopping HTTP redirection in Angular 2

Validation of route parameters in Angular 4

`Warning: The alert function is not working properly in the console error

Encountering an error when utilizing Angular Animation with Bootstrap -> Issue arises from attempting to read properties of undefined (specifically 'box-sizing')

Guide to navigating to a specific route based on location in a Node.js Express application

Retrieve information using Observables just once in Angular 2

Guide to initiating an Angular 6 project using Angular CLI version 7.3.3

The revalidation process in react-hook-form doesn't seem to initiate

Searching for a value within an array of objects in Typescript/Vue 3. The objects are of an unknown data type

main.js:1 ERROR TypeError: Unable to access property 'querySelectorAll' of null

Utilizing feature flags for Angular modules to enable lazy loading

Instead of the type definition file, navigate to the TypeScript source file within VS Code

Trouble with Typescript in VSCode made easy