[Angular2] SearchPipe

search.pipe.ts

// usage: {{ payments | search:'info.holder':holderSearchKey }}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search',
  pure: false
})
export class SearchPipe implements PipeTransform {
  transform<T>(value: T[], propertyKey: string, searchKey: string, ignoreCase: boolean = true): T[] {
    if (searchKey.length == 0 || !value) {
      return value
    } else {
      if (ignoreCase) {
        searchKey = searchKey.toLowerCase()
      }

      const propertyKeys = propertyKey.split('.')
      let newValue = value.filter((each) => {
        let property: any = each
        propertyKeys.forEach((key) => {
          if (property) {
            property = property[key]            
          }
        })

        if (typeof property === "string") {
          if (ignoreCase) {
            return property.toLowerCase().indexOf(searchKey) != -1
          } else {
            return property.indexOf(searchKey) != -1
          }
        } else return false
      })
      return newValue
    }
  }
}

코멘트 드립니다.

1) 유지보수 관련

• 21줄 : propertyKeys의 경우 키 할당이 목적이라면 forEach대신 var keyNames = Object.keys(propertyKeys); 로 대체하면 보다 좋을것 같습니다.
• 27줄 : property가 any타입입니다. typeof property라고 타입을 체크하기 보다 let property: string으로 형을 명시하여 조건검사 생략이 나을것으로 생각됩니다. .
• 10줄 : T[] 제너릭 타입에 사전정의가 없고, 파이프의 any형과 같은 일반화 형태가 보다 적합하지 않을까 생각합니다.

2) 성능광련

• 22줄 : 이미 외부에서 입력 리스트에 대해 순회중하여 each로 리스트 아이템중 하나의 아이템을 가져 오기 때문에 내부 순회가 불필요 하다고 생각됩니다
• 28줄 : filter 내부에서 ignoreCase 체크는 조건 체크가 이터레이션 마다 수행되기 때문에 성능문제가 발생할 수 있다고 생각됩니다. 이 조건은 외부 스코프로 분리하는 것이 나을것 같습니다.

3) 네이밍관련

• 19줄 : newValue라는 변수이름은 단수이므로 filteredList와 같이 좀더 의미있는 이름이였으면 합니다.
• 19줄 : (each)에서 괄호 불필요하며 each라는 추상적인 의미가 있어 마치 루프를 연상시키므로 item과 같은 객체라는 느낌으로 변경되었으면 합니다.

4) 기타

혹시 참고가 되실까 해서 제가 작성하여 둔 검색파이프 코드를 공유드립니다.

/*
    happygrammer.dev@gmail.com (2016-08-05)
    커스텀 검색 파이프
*/
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'search'
})
export default class SearchPipe implements PipeTransform {
    transform(input: any, keyword: string, field: string = null, ignoreCase: boolean = false): any {
        if (field === null) {
            return input;
        } else {
            if (ignoreCase) {
                keyword=keyword.toLowerCase();
                return input.filter(item => {
                    if (item[field].toLowerCase().indexOf(keyword) != -1) {
                        return item;
                    }
                });
            } else {
                return input.filter(item => {
                    if (item[field].indexOf(keyword) != -1) {
                        return item;
                    }
                });
            }
        }
    }
}

사용예

<ul>
     <li *ngFor="let member of members | search:key:field:ignoreCase">
       {{ member.name }} ({{ member.age }})
     </li>
</ul>

그럼 조금이나마 도움 되셨길 바라고 혹시 제가 드린 코멘트 중에 오류가 있거나 궁금하신 점은 언제든지 질문 주시기 바랍니다.
감사합니다.