【React + TypeScript】ジェネリクスで汎用的なコンポーネントを作る

August 20, 2022

コードで見た方が早いと思うので、さっそくですが以下です。

export interface Props<T> {
  items: T[]
  renderItem: (item: T) => ReactNode
}

export const FantasticList = <T,>({ items, renderItem }: Props<T>) => {
  return <ul>{items.map(renderItem)}</ul>
}

アロー関数を使う場合、 <T> は使えず <T,> と書きます。 JSX のパーサーが上手く読んでくれないらしいです。 https://github.com/microsoft/TypeScript/issues/15713#issuecomment-499474386

※ 個人的にはジェネリクスのコンポーネントは読み辛いので、出来る限り作ることは避けるべきだと思います。