Reactで、Setの集合メソッドを使って複数のタグで絞り込む方法

a = Set { 'React', 'TypeScript', 'テスト' }
b = Set { '入門', 'React' }

a.union(b)        = ["React","TypeScript","テスト","入門"]
a.intersection(b) = ["React"]
a は変わらない     = ["React","TypeScript","テスト"]
a.union(b) === a  = false

// tagSets.ts
export type Mode = 'and' | 'or';

export type Post = {
  id: number;
  title: string;
  tags: ReadonlySet<string>;
};

// 選んだタグで、記事が残るかどうかを決める
export function matches(postTags: ReadonlySet<string>, selected: ReadonlySet<string>, mode: Mode): boolean {
  if (selected.size === 0) return true; // 何も選んでいなければ全部出す
  const common = postTags.intersection(selected); // 記事のタグと、選んだタグの共通部分
  return mode === 'and' ? common.size === selected.size : common.size > 0;
}

// 記事のタグを全部まとめる
export function allTags(posts: readonly Post[]): Set<string> {
  return posts.reduce((acc, p) => acc.union(p.tags), new Set<string>());
}

// タグを1つ入れたり外したりした、新しい Set を返す（元の Set は変えない）
export function toggle(selected: ReadonlySet<string>, tag: string): Set<string> {
  const one = new Set([tag]);
  return selected.has(tag) ? selected.difference(one) : selected.union(one);
}

union(配列): TypeError - The .size property is NaN
intersection(配列): TypeError - The .size property is NaN
union(Map) = ["a","b"]

// TagFilter.tsx
import { useMemo, useState } from 'react';
import { allTags, matches, toggle, type Mode, type Post } from './tagSets';

export function TagFilter({ posts }: { posts: readonly Post[] }) {
  const [selected, setSelected] = useState<ReadonlySet<string>>(() => new Set());
  const [mode, setMode] = useState<Mode>('and');

  const tags = useMemo(() => [...allTags(posts)].sort(), [posts]);
  const visible = posts.filter((p) => matches(p.tags, selected, mode));
  // 今の結果に残った記事のタグ。AND のとき、ここにないタグを足すと0件になる
  const reachable = allTags(visible);

  return (
    <div className="tag-filter">
      <fieldset>
        <legend>条件</legend>
        <label>
          <input type="radio" name="mode" checked={mode === 'and'} onChange={() => setMode('and')} />
          すべて含む（AND）
        </label>
        <label>
          <input type="radio" name="mode" checked={mode === 'or'} onChange={() => setMode('or')} />
          どれかを含む（OR）
        </label>
      </fieldset>

      <div className="tags">
        {tags.map((tag) => (
          <button
            key={tag}
            type="button"
            aria-pressed={selected.has(tag)}
            disabled={mode === 'and' && !selected.has(tag) && !reachable.has(tag)}
            onClick={() => setSelected((prev) => toggle(prev, tag))}
          >
            {tag}
          </button>
        ))}
      </div>

      <p className="count">{visible.length}件</p>
      <ul>
        {visible.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

// Mutate.tsx（Set をその場で書き換えたときの確認用）
import { useState } from 'react';

export function Mutate() {
  const [selected, setSelected] = useState<Set<string>>(() => new Set());
  return (
    <div id="mutate">
      <button
        type="button"
        onClick={() =>
          setSelected((prev) => {
            prev.add('React'); // 同じ Set をそのまま返す
            return prev;
          })
        }
      >
        add で追加
      </button>
      <button type="button" onClick={() => setSelected((prev) => prev.union(new Set(['TypeScript'])))}>
        union で追加
      </button>
      <output>{[...selected].join(', ') || '（なし）'}</output>
    </div>
  );
}

最初: （なし）
add で追加 を押したあと: （なし）
add で追加 をもう一度押したあと: （なし）
union で追加 を押したあと: React, TypeScript

tags  = Set { 'a', 'b', 'c' }
fewer = Set { 'c', 'a' }            // tags より小さい
more  = Set { 'c', 'a', 'x', 'y' }  // tags より大きい

tags.intersection(fewer) = ["c","a"]
tags.intersection(more)  = ["a","c"]

src/tagSets.ts(13,27): error TS2339: Property 'intersection' does not exist on type 'ReadonlySet<string>'.
src/tagSets.ts(19,39): error TS2550: Property 'union' does not exist on type 'Set<string>'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2025' or later.
src/tagSets.ts(25,39): error TS2339: Property 'difference' does not exist on type 'ReadonlySet<string>'.
src/tagSets.ts(25,66): error TS2339: Property 'union' does not exist on type 'ReadonlySet<string>'.
exit: 1

{
  "compilerOptions": {
    "lib": ["ES2022", "ESNext.Collection", "DOM", "DOM.Iterable"]
  }
}