背景 今回もmattさんのTypeScriptTipsをまとめていく。
TypeScript Tip #8
概要 Reactのジェネリクスを使用して、動的で柔軟なコンポーネントを作成することができる。
本題 以下のコードはReactのサンプルのコードである。
Tableコンポーネントのpropsに存在するitemsはオブジェクトの配列になっている。
オブジェクトはプロパティidのみを保持している。
import React from 'react' interface TableProps { items: { id: string }[] renderItem: (item: { id: string }) => React.ReactNode } export const Table = (props: TableProps) => { return null } const Component = () => { return ( <Table items={[ { id: '1', } ]} renderItem={(item) => <div>{ item.id }</div>} ></Table> ) } 上記の場合、propsitemsにオブジェクトのid以外のプロパティを定義したい場合、TablePropsにも追加をしてやる必要がある。 以下はそのサンプルコード