array.groupBy in Typoskript
Die grundlegenden array-Klasse hat .map
, .forEach
, .filter
, und .reduce
, aber .groupBy
ich merklich abwesend, hindert mich daran, etwas zu tun, wie
const MyComponent = (props:any) => {
return (
<div>
{
props.tags
.groupBy((t)=>t.category_name)
.map((group)=>{
[...]
})
}
</div>
)
}
Ich landete Umsetzung, selbst etwas:
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
}
So, jetzt kann ich tun
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>
)
}
Funktioniert Recht gut, aber es ist schade, dass ich wickeln Sie die Liste eher als nur in der Lage, um die Methodenaufrufe verketten.
Gibt es eine bessere Lösung?
typescript fügt keine polyfills für die ES6-standard-Bibliothek ändert. Wenn Sie möchten, bekommen Sie diese natürlich auch ich würde vorschlagen, die Suche in core.js 🙂
InformationsquelleAutor Eldamir | 2017-02-09
Du musst angemeldet sein, um einen Kommentar abzugeben.
könnte man hinzufügen, die Funktion um die array-Prototyp in Ihrer app (Hinweis: einige nicht empfehlen diese: Warum ist die Ausweitung native Objekte, die eine schlechte Praxis?):
Dann eine Schnittstelle erstellen in Typoskript so:
.d....ts-version:
ODER in eine normale ts Datei:
Dann können Sie verwenden:
Array<T>
- Schnittstelle und verbinden Sie mit der bisherigen definition? Oder muss ich zwei array-Typen?Yep, wird er es abholen. Wir verwenden es in unserer app-viel
den Grund dafür gefunden. Aktualisiert haben, meine Antwort. Ich habe immer dazu neigen, verwenden Sie die Definitionsdateien für diese Dinge. Sie nicht brauchen, um beziehen sich auf die Globale definition Datei
Typoskript verwendet Erklärung der Zusammenführung von Schnittstellen. Sie sind "open-ended", das heißt, Sie können sich ausbreiten und erweitern Sie die Funktionalität der Schnittstelle über mehrere Erklärungen. Dieses Beispiel doch die ich bin nicht ein Verfechter, deutet darauf hin, dass Sie binden eine benutzerdefinierte Funktion zu Array.der Prototyp. Dies ist eine schlechte Praxis und sollte vermieden werden. Was passiert, wenn das ECMAScript-team entscheiden, dass Array.der Prototyp.groupBy kein Ding sein sollte? - Dein code bricht die ihrigen, und Umgekehrt. Sie wären besser dran, Array erweitern und hinzufügen von Funktionalität, um Ihren eigenen Typ (Klasse SuperArray erstreckt Array...)
wir können definieren, Array.der Prototyp.groupBy überall im code?
InformationsquelleAutor Andrew Monks