ReactでObject.groupByを使い種類別に一覧を出す方法

export type Category = '果物' | '野菜' | '飲み物';

export type Product = {
  id: string;
  name: string;
  category: Category;
  price: number;
};

// 種類はわざとばらばらに並べてある
export const products: Product[] = [
  { id: 'p1', name: 'りんごジュース', category: '飲み物', price: 180 },
  { id: 'p2', name: 'バナナ', category: '果物', price: 198 },
  { id: 'p3', name: 'にんじん', category: '野菜', price: 120 },
  { id: 'p4', name: 'みかん', category: '果物', price: 350 },
  { id: 'p5', name: '緑茶', category: '飲み物', price: 140 },
  { id: 'p6', name: 'キャベツ', category: '野菜', price: 210 },
  { id: 'p7', name: 'りんご', category: '果物', price: 128 },
  { id: 'p8', name: 'トマトジュース', category: '飲み物', price: 160 },
];

import type { Category, Product } from './data';

// 見出しを出す順番。Object.groupBy の結果のキーの順番には頼らない
export const CATEGORY_ORDER: Category[] = ['果物', '野菜', '飲み物'];

export function groupByCategory(items: Product[]) {
  return Object.groupBy(items, (item) => item.category);
}

[1] キーの順番: [ '飲み物', '果物', '野菜' ]
[1] 果物: [ 'バナナ', 'みかん', 'りんご' ]
[2] 同じオブジェクトか: true
[3] プロトタイプ: null
[3] hasOwnProperty の型: undefined
[3] Object.hasOwn(..., "果物"): true
[3] "toString" in 結果: false

import { useMemo, useState } from 'react';
import type { Product } from './data';
import { CATEGORY_ORDER, groupByCategory } from './group';

export function ProductList({ products }: { products: Product[] }) {
  const [query, setQuery] = useState('');

  const groups = useMemo(() => {
    const hits = products.filter((p) => p.name.includes(query));
    return groupByCategory(hits);
  }, [products, query]);

  return (
    <div>
      <label>
        名前で絞り込む
        <input value={query} onChange={(e) => setQuery(e.target.value)} />
      </label>

      {CATEGORY_ORDER.map((category) => {
        const items = groups[category];
        if (!items) return null; // 1件もない種類は、見出しごと出さない
        return (
          <section key={category} aria-labelledby={`h-${category}`}>
            <h2 id={`h-${category}`}>
              {category}（{items.length}件）
            </h2>
            <ul>
              {items.map((p) => (
                <li key={p.id}>
                  {p.name} <span>{p.price}円</span>
                </li>
              ))}
            </ul>
          </section>
        );
      })}
    </div>
  );
}

src/group.ts(7,17): error TS2550: Property 'groupBy' does not exist on type 'ObjectConstructor'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2024' or later.
src/group.ts(7,33): error TS7006: Parameter 'item' implicitly has an 'any' type.

const groups = groupByCategory(products);

// 確かめずに使う
console.log(groups['果物'].length);

tserr/use.ts(7,13): error TS2532: Object is possibly 'undefined'.

[4] Object.groupBy のキー: [ '2024', '2025', '2026' ]
[4] キーの型: string
[5] Map.groupBy のキー: [ 2026, 2025, 2024 ]
[5] キーの型: number
[6] 混ざったキー: [ '2', '10', 'b', 'a', '01' ]

type Post = { id: string; title: string; year: number };

// posts は新しい順に並んでいるものとする
export function YearArchive({ posts }: { posts: Post[] }) {
  const byYear = Map.groupBy(posts, (p) => p.year);

  return (
    <>
      {Array.from(byYear, ([year, items]) => (
        <section key={year}>
          <h2>{year}年</h2>
          <ul>
            {items.map((p) => (
              <li key={p.id}>{p.title}</li>
            ))}
          </ul>
        </section>
      ))}
    </>
  );
}

Map.groupBy   : [ '2026年', '2025年', '2024年' ]
Object.groupBy: [ '2024年', '2025年', '2026年' ]