tableau.groupBy en caractères d'imprimerie

La base de la matrice de classe a .map, .forEach, .filter, et .reduce, mais .groupBy j'ai fait absent, m'empêchant de faire quelque chose comme

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

        </div>
    )
}

J'ai fini par mettre en place quelque chose de moi-même:

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
}

Alors maintenant, je peux faire

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

Fonctionne assez bien, mais c'est dommage que j'ai besoin d'envelopper la liste plutôt que d'être simplement capable d'enchaîner les appels de méthode.

Est-il une meilleure solution?

tapuscrit ne pas ajouter de polyfills pour l'ES6 bibliothèque standard changements. Si vous souhaitez obtenir de ceux qui sont trop, je suggère de regarder dans core.js 🙂

OriginalL'auteur Eldamir | 2017-02-09

  1. 5

    vous pouvez ajouter la fonction de la matrice de prototype dans votre application (note certains de ne pas recommander ce: Pourquoi l'extension des objets natifs d'une mauvaise pratique?):

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

    Alors de créer une interface en caractères d'imprimerie comme ceci:

    .d.ts version:

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

    OU normales dans un fichier ts:

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

    Ensuite, vous pouvez utiliser:

     props.tags.groupBy((t)=>t.category_name)
     .map((group)=>{
                    [...]
                })
    Sera le compilateur automatiquement chercher le Array<T> de l'interface et de fusionner avec la définition actuelle? Ou vais-je avoir du tableau deux types?
    Yep, il va le ramasser. Nous l'utilisons dans notre application beaucoup
    trouvé la raison. Avoir mis à jour ma réponse. J'ai toujours tendance à utiliser les fichiers de définition de ces choses. vous n'avez pas besoin de consulter le mondial dans un fichier de définition
    La machine utilise la déclaration de la fusion sur les interfaces. Ils sont "ouvertes", ce qui signifie que vous pouvez répartir et d'étendre les fonctionnalités d'une interface sur plusieurs déclarations. Cet exemple cependant, je ne suis pas un fervent défenseur de l', vous suggère de lier une fonction personnalisée à la Matrice.le prototype. C'est une mauvaise pratique, et doit être évitée. Ce qui se passe lorsque l'ECMAScript équipe de décider de ce Tableau.le prototype.groupBy devrait être une chose? - Votre code rompt le sien, et vice-versa. Vous auriez mieux fait de l'extension de Tableau et de l'ajout de la fonctionnalité de votre propre type (classe SuperArray s'étend Tableau...)
    on peut définir la Matrice.le prototype.groupBy n'importe où dans le code?

    OriginalL'auteur Andrew Monks