質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3770閲覧

React、TypeScript で map で回しながらテーブルを作るベストプラクティスを知りたいです。

nerianighthawk

総合スコア544

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2019/07/29 09:06

編集2019/07/30 00:15

前提・実現したいこと

フレームワークを 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 を落とせばいいのかわかりません。
インターフェース Propscolumnskeyof DataProps 型を指定しているため、インターフェース DataProps のキーを落とす必要がありますが、いろいろ試して(試した内容は下記試したこと参照)もTypes of property 'id' are incompatible. のエラーが発生してしまいます。

試したこと

最初はcolumnsid にそれぞれのキーの文字列を入れていましたが、string 型として扱われてしまい、ダメでした。
また、下記サイトを一読しましたが、解決策を見出すことはできませんでした。
https://qiita.com/Quramy/items/e27a7756170d06bef22a

そもそもベストプラクティスが別であるのか、この実装で型指定をうまくする方法があるのかを知りたいです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決したので記載しますが、なぜこれで解決するのかまだ完全には理解できていません。
質問内に記載するべきでしたが、上記 DenseTablecolumns を落とす時に以下のようにしていました。

TypeScript

1const columns = [{id: 'date', name: '日付'}] 2return (<DenseTable columns={columns} rows={rows} />)

これを別の以下の関数を作成することで解決しました。

TypeScript

1createHeader(id: keyof DataProps, name: string) { 2 return { id: id, name: name} 3} 4 5// 省略 6 7render() { 8 const columns = [this.createHeader('date', '日付')] 9 return (<DenseTable columns={columns} rows={rows} />) 10}

createHeader 関数を作成することで、'date' という文字列を最初から keyof DataProps 型として扱えるようになり、落とせるようになったのかなと考えています。
解釈が間違っていたらすみません。
また、他にベストプラクティスがあれば、ご教授願いたいです。
一先ず自己解決にしておきます。

投稿2019/07/30 00:49

nerianighthawk

総合スコア544

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問