React Component の Props を Generic にする。

背景

特定の型を持たないPros1で指定した値の型を、別のProps2でも活用したいという場面は、たまにあると思います。型アサーションで解決できなくもないけど、毎度 as していくのも手間なので、Genericで解決できないかと実装してみた

やりたいこと

onChange の引数で受け取る meta に自動で型をつけたいと思います。

<MyList 
  items={[
    { 
      id: id,
      meta: meta // <- 特定の型を持たないメタ情報
    }
  ]}
  onChange={
    ({meta}) => {
      console.log(meta)  // <- itemsで指定したmetaの型として扱いたい
    }
  }
/>

実現方法

type Items<MetaType> = {
  id: string;
  meta: MetaType; 
};

type Props<MetaType> = {
  items: Items<MetaType>[];
  onChange: (data: {　meta: MetaType}) => void;
};

export function MyList<MetaType>(props: Props<MetaType>) {
 return props.items.map(item) => (
   <div
    key={item.id}
    onChange={props.onChange}
   >
     {item.id}
   <div>
 )
}

備考

以下のようにアロー関数で書こうとすると、 <MetaType> の部分でJSXの構文エラーがでてしまうので注意

export const MyList = <MetaType>(props: Props<MetaType>) => {
return props.items.map(item) => (
   <div
    key={item.id}
    onChange={props.onChange}
   >
     {item.id}
   <div>
 )
}