Reactとジェネリクスで、型の付いた一覧と選択の部品を作る方法

import type { Key, ReactNode, Ref } from 'react';

type ListProps<T> = {
  items: T[];
  getKey: (item: T) => Key;
  renderItem: (item: T) => ReactNode;
  emptyText?: string;
  ref?: Ref<HTMLUListElement>;
};

export function List<T>({ items, getKey, renderItem, emptyText = 'ありません', ref }: ListProps<T>) {
  if (items.length === 0) return <p>{emptyText}</p>;
  return (
    <ul ref={ref}>
      {items.map((item) => (
        <li key={getKey(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

type Cat = { id: number; name: string; age: number };
type Food = { code: string; title: string; price: number };

<List items={cats} getKey={(c) => c.id} renderItem={(c) => `${c.name}（${c.age}歳）`} />
<List items={foods} getKey={(f) => f.code} renderItem={(f) => `${f.title} ${f.price}円`} />

<ul>
<li>たま（3歳）</li>
<li>みけ（5歳）</li>
<li>くろ（1歳）</li></ul>
<ul>
<li>カリカリ 800円</li>
<li>ちゅーる 300円</li></ul>

<List items={cats} getKey={(c) => c.id} renderItem={(c) => c.title} />

errors/WrongUsage.tsx(11,68): error TS2339: Property 'title' does not exist on type 'Cat'.

type SelectProps<T> = {
  label: string;
  options: T[];
  value: T | null;
  onChange: (value: T | null) => void;
  getKey: (option: T) => string;
  getLabel: (option: T) => string;
};

export function Select<T>({ label, options, value, onChange, getKey, getLabel }: SelectProps<T>) {
  return (
    <label>
      {label}
      <select
        value={value === null ? '' : getKey(value)}
        onChange={(e) => {
          const found = options.find((option) => getKey(option) === e.target.value);
          onChange(found ?? null);
        }}
      >
        <option value="">選んでください</option>
        {options.map((option) => (
          <option key={getKey(option)} value={getKey(option)}>
            {getLabel(option)}
          </option>
        ))}
      </select>
    </label>
  );
}

const [cat, setCat] = useState<Cat | null>(null);

<Select
  label="猫"
  options={cats}
  value={cat}
  onChange={setCat}
  getKey={(c) => String(c.id)}
  getLabel={(c) => c.name}
/>

const showFood = (food: Food | null) => console.log(food?.title);

<Select label="猫" options={cats} value={cat} onChange={showFood} getKey={(c) => String(c.id)} getLabel={(c) => c.name} />

errors/WrongUsage.tsx(12,25): error TS2322: Type 'Cat[]' is not assignable to type 'Food[]'.
errors/WrongUsage.tsx(12,40): error TS2322: Type 'Cat | null' is not assignable to type 'Food | null'.
errors/WrongUsage.tsx(12,96): error TS2339: Property 'id' does not exist on type 'Food'.
errors/WrongUsage.tsx(12,120): error TS2339: Property 'name' does not exist on type 'Food'.

errors/ExplicitType.tsx(9,55): error TS2322: Type '(food: Food | null) => void' is not assignable to type '(value: Cat | null) => void'.

<List items={[]} getKey={(c) => c.id} renderItem={(c) => c.name} />

errors/EmptyArray.tsx(7,41): error TS2339: Property 'id' does not exist on type 'never'.
errors/EmptyArray.tsx(7,66): error TS2339: Property 'name' does not exist on type 'never'.

type IdListProps<T extends { id: Key }> = {
  items: T[];
  renderItem: (item: T) => ReactNode;
};

export function IdList<T extends { id: Key }>({ items, renderItem }: IdListProps<T>) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

errors/Constraint.tsx(23,15): error TS2322: Type 'Food[]' is not assignable to type '{ id: Key; }[]'.
  Property 'id' is missing in type 'Food' but required in type '{ id: Key; }'.

export const NoComma = <T>(props: { items: T[] }) => <p>{props.items.length}件</p>;

errors/ArrowGeneric.tsx(1,25): error TS17008: JSX element 'T' has no corresponding closing tag.

const OldList = forwardRef(function OldList<T>(
  { items, renderItem }: OldListProps<T>,
  ref: Ref<HTMLUListElement>,
) {
  return <ul ref={ref}>{items.map((item, i) => <li key={i}>{renderItem(item)}</li>)}</ul>;
});

<OldList items={cats} renderItem={(c) => c.name} />

errors/ForwardRef.tsx(17,51): error TS18046: 'c' is of type 'unknown'.

# 最初の表示: 選んだ猫：なし／ごはん：なし
# 猫で「みけ」を選んだ後: 選んだ猫：みけ（5歳）／ごはん：なし
# ごはんで「ちゅーる」を選んだ後: 選んだ猫：みけ（5歳）／ごはん：ちゅーる（300円）
# 猫を「選んでください」に戻した後: 選んだ猫：なし／ごはん：ちゅーる（300円）