array.groupBy 타이프에서

Question

기본 배열 클래스는 뭔가 나 자신을 구현 결국

const MyComponent = (props:any) => { 
    return (
     <div> 
      { 
       props.tags 
       .groupBy((t)=>t.category_name) 
       .map((group)=>{ 
        [...] 
       }) 
      } 

     </div> 
    ) 
} 

같은 일을에서 저를 방지 .map, .forEach, .filter 및 .reduce하지만 .groupBy 내가 noticably 결석했습니다

class Group<T> { 
    key:string; 
    members:T[] = []; 
    constructor(key:string) { 
     this.key = key; 
    } 
} 


function groupBy<T>(list:T[], func:(x:T)=>string): Group<T>[] { 
    let res:Group<T>[] = []; 
    let group:Group<T> = null; 
    list.forEach((o)=>{ 
     let groupName = func(o); 
     if (group === null) { 
      group = new Group<T>(groupName); 
     } 
     if (groupName != group.key) { 
      res.push(group); 
      group = new Group<T>(groupName); 
     } 
     group.members.push(o) 
    }); 
    if (group != null) { 
     res.push(group); 
    } 
    return res 
} 

그래서 지금 내가 할 수있는

const MyComponent = (props:any) => { 
    return (
     <div> 
      { 
       groupBy(props.tags, (t)=>t.category_name) 
       .map((group)=>{ 
        return (
         <ul key={group.key}> 
          <li>{group.key}</li> 
          <ul> 
           { 
            group.members.map((tag)=>{ 
             return <li key={tag.id}>{tag.name}</li> 
            }) 
           } 
          </ul> 
         </ul> 
        ) 
       }) 
      } 

     </div> 
    ) 
} 

잘 작동하지만, 메서드 호출을 체인화 할 수있는 것보다 목록을 래핑해야한다는 것이 너무 나쁘다.

더 좋은 솔루션이 있습니까?

앱의 배열 프로토 타입에 기능을 추가 할 수

Answer 1

는 (: Why is extending native objects a bad practice? 일부는이를 권 해드립니다하지 마십시오) :

.D :

Array.prototype.groupBy = function(/* params here */) { 
    let array = this; 
    let result; 
    /* do more stuff here*/ 
    return result; 
}; 

는 다음과 같이 타이프의 인터페이스를 만들 .TS 버전 :

:

interface Array<T> 
    { 
     groupBy<T>(func:(x:T) => string): Group<T>[] 
    } 

또는 정상 TS 파일에

은 그럼 당신은 사용할 수 있습니다

props.tags.groupBy((t)=>t.category_name) 
    .map((group)=>{ 
        [...] 
       })