typescript 28 lines · 6 steps

A type-safe groupBy in TypeScript

A generic helper that buckets items by any computed key, with the return type inferred from the key function.

Explained by highlit

Intermediate generics reduce type-inference grouping aggregation

1interface Order {
2  id: number;
3  customerId: string;
4  total: number;
5  status: 'pending' | 'shipped' | 'delivered';
6}
7 
8function groupBy<T, K extends PropertyKey>(
9  items: readonly T[],
10  keyFn: (item: T) => K,
11): Record<K, T[]> {
12  return items.reduce((groups, item) => {
13    const key = keyFn(item);
14    (groups[key] ??= []).push(item);
15    return groups;
16  }, {} as Record<K, T[]>);
17}
18 
19const ordersByStatus = groupBy(orders, (order) => order.status);
20const ordersByCustomer = groupBy(orders, (order) => order.customerId);
21 
22const revenueByCustomer = Object.entries(ordersByCustomer).map(
23  ([customerId, customerOrders]) => ({
24    customerId,
25    orderCount: customerOrders.length,
26    revenue: customerOrders.reduce((sum, o) => sum + o.total, 0),
27  }),
28);

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Generic type parameters let one function stay reusable while preserving precise types at every call site.
2reduce with a typed accumulator turns a flat list into a keyed structure in a single pass.
3Once data is grouped, Object.entries plus map is a clean route to per-key aggregates.

Related explainers

typescript

type RequestState<T, E = string> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T; fetchedAt: number }

Modeling request state with discriminated unions

discriminated-unions exhaustiveness-checking state-machine

Intermediate 8 steps

java

public Map<Long, List<Order>> ordersByCustomer(List<Order> orders) {
    return orders.stream()
            .collect(Collectors.groupingBy(Order::getCustomerId));
}

Grouping streams with Java Collectors

streams grouping collectors

Intermediate 5 steps

typescript

import {
  Directive,
  Input,
  TemplateRef,

Building a structural *appUnless directive in Angular

structural-directive template-rendering dependency-injection

Intermediate 8 steps

typescript

type EventMap = Record<string, unknown[]>;
 
type Listener<Args extends unknown[]> = (...args: Args) => void;

A type-safe event emitter in TypeScript

generics mapped-types event-emitter

Advanced 8 steps

java

public final class Debouncer<T> {
 
    private final ScheduledExecutorService scheduler =
            Executors.newSingleThreadScheduledExecutor(runnable -> {

How a debouncer collapses bursts in Java

debounce concurrency scheduling

Intermediate 9 steps

typescript

import { inject } from '@angular/core';
import { ResolveFn, Router, ActivatedRouteSnapshot } from '@angular/router';
import { catchError, of, EMPTY } from 'rxjs';
import { Article } from './models/article';