时间戳

首页 > 解决方案 > 在 Angular 打字稿中重构重复的代码

angular - 在 Angular 打字稿中重构重复的代码

问题描述

我需要重构重复的代码，但我不知道该怎么做。

我有两种基本上调用相同服务的方法（由于分页，我需要调用相同的请求）但现在由于重复代码而看起来很难看。我怎样才能使它变得更好？

    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
                };
            })
        );

标签： angulartypescriptrefactoring

解决方案

这个问题可能有多种优雅的解决方案。我可以提出以下快速更改

  1. 为使用的对象定义类型（例如，使用 TS 接口）
export interface ISearch { 
  searchResult: IStockResult[]; 
  searchCount: number; 
}

export interface IMeta {
  pagination: {
    size: number;
    index: number;
  },
  sorting: {
    order: string;
    attribute: string;
  }
}
  1. 使用定义的类型定义可选参数?:，并将参数作为对象发送。
getData(id: string, meta?: IMeta): Observable<ISearch>

所以以前的电话会变成

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);
  1. 在使用可选参数之前，检查是否使用空值合并运算符 ( ??)定义了可选参数。
const meta = meta ?? this.service.getSearchMetaDefaults();

结合一切

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))
  );
}

推荐阅读