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?を）：あなたのアプリで、アレイのプロトタイプに機能を追加することができ

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

次に、このようなtypescriptですのインターフェイスを作成：

.Dを.TSバージョン：

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

または通常のTSファイルで：

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

次に、あなたが使用することができます。

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