前提・実現したいこと
フレームワークを React、言語を TypeScript でテーブルを作ろうとしています。
UI のフレームワークは React Material UI を使っています。
出来るだけリストの map
関数を用いた実装を考えており、行と列のそれぞれを map
で回すことを目標にしています。
発生している問題・エラーメッセージ
TypeScript の型指定周りでうまく指定できません。
ソースコードは以下の通りです。
以下はテーブルそのもののソースです。
TypeScript
1interface DataProps { 2 // データのキーと型を指定 3} 4 5interface Props { 6 columns: { id: keyof DataProps, name: string }[] 7 rows: DataProps[] 8} 9 10export default function DenseTable(props: Props) { 11 const classes = useStyles() 12 13 return ( 14 <div className={classes.root}> 15 <EnhancedTableToolbar /> 16 <Table className={classes.table} size="small"> 17 <TableHead> 18 <TableRow> 19 {props.columns.map(column => ( 20 <TableCell key={column.id}>{column.name}</TableCell> 21 ))} 22 </TableRow> 23 </TableHead> 24 <TableBody> 25 {props.rows.map(row => ( 26 <TableRow key={row.id}> 27 {props.columns.map(column => ( 28 <TableCell>{row[column.id]}</TableCell> 29 ))} 30 </TableRow> 31 ))} 32 </TableBody> 33 </Table> 34 </div> 35 ); 36}
この DenseTable
を呼ぶ際にどのように Prop を落とせばいいのかわかりません。
インターフェース Props
の columns
で keyof DataProps
型を指定しているため、インターフェース DataProps
のキーを落とす必要がありますが、いろいろ試して(試した内容は下記試したこと参照)もTypes of property 'id' are incompatible.
のエラーが発生してしまいます。
試したこと
最初はcolumns
の id
にそれぞれのキーの文字列を入れていましたが、string
型として扱われてしまい、ダメでした。
また、下記サイトを一読しましたが、解決策を見出すことはできませんでした。
https://qiita.com/Quramy/items/e27a7756170d06bef22a
そもそもベストプラクティスが別であるのか、この実装で型指定をうまくする方法があるのかを知りたいです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。