GroupBy using Typescript Generics

April 06, 2020

We have needed the ability to group an array of items by the value of a property, much like the way C# LINQ works, a few times now. Below is an adaption of code taken from here.

helpers.ts

/**
 * Groups all items in an array of objects `T` where the value of property `K` is the same
 * @param array Items to group
 * @param key Key of `T` to group by
 */
export function GroupBy<T, K extends keyof T>(array: T[], key: K) {
	let map = new Map<T[K], T[]>();
	array.forEach(item => {
		let itemKey = item[key];
		if (!map.has(itemKey)) {
			map.set(itemKey, array.filter(i => i[key] === item[key]));
		}
	});
	return map;
}

The function takes an array of items of generic T, and a property of the items as the key K.

Here, we are taking advantage of the Map type, as well as generics and index types in typescript. The function iterates over each item to see if a key currently exists, and if it doesn't, it creates the key and adds all items that have the same value.

Example

index.ts

const items = [
    {type: "dog", name: "fred"},
    {type: "cat", name: "milo"},
    {type: "dog", name: "otis"},
    {type: "duck", name: "barry"},
];
let grouped = GroupBy(items, "type");
console.log(grouped);
/* OUTPUT:
{
    {
        key: "dog",
     	value: [
	        {type: "dog", name: "fred"},
        	{type: "dog", name: "otis"},
    	]
    },
    {
        key: "cat": 
        value: [
        	{type: "cat", name: "milo"},
    	]
    },
    {
    	key: "duck",
         value: [
	        {type: "duck", name: "barry"},
    	]
    }
}
*/

We can then use the returned value by iterating and accessing the key and value properties of each entry:

index.ts

grouped.forEach((items, key) => {
   console.log(key, items); 
});

In Prod

← Back to Posts

GroupBy using Typescript Generics

Example