teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問React-Tableを使用したJavaScriptをTypeScriptへ変換する件

編集履歴

質問編集履歴

4

タイトル変更

2021/11/30 07:50

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- React-Table使用のJavaScriptをTypeScriptへ変換する
1
+ React-Tableを使用したJavaScriptをTypeScriptへ変換する件
body CHANGED
File without changes

3

問題部分を簡潔にしました

2021/11/30 07:50

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- JavaScriptを使用したReact-TableをTypeScriptへ置換したい
1
+ React-Table使用のJavaScriptをTypeScriptへ変換する
body CHANGED
@@ -1,11 +1,10 @@
1
1
  ### 前提・実現したいこと
2
- 次のサイトを参考に、React-Tableを使用したデータテーブルを作成しています。
3
- [React Tableの紹介](https://ichi.pro/react-table-no-shokai-121758914446750)
2
+ [React Tableの紹介](https://ichi.pro/react-table-no-shokai-121758914446750)を参考に、React-Tableを使用したデータテーブルを作成しています。
4
- 主に【行選択のあるテーブル】を参照中、、
3
+ 今回の問題は【フィルター付きテーブル】の部分です。
5
- 以下に記載のJavaScriptをTypeScriptのように変換していたところ、エラーが発生し、その一部が解決できず困っております。
4
+ 以下へ記載するJavaScriptをTypeScriptへ変換したところ、エラーが発生しました。
6
- ご助力よろしくお願いいたします。
5
+ 一部のエラーが解決できませんでしたので、ご助力よろしくお願いいたします。
7
6
 
8
- ### TypeScript 18行目の[columnIds]部分
7
+ ### TypeScript 21行目の"[id]"部分
9
8
 
10
9
  ```
11
10
  型 'string[]' はインデックスの型として使用できません。ts(2538)
@@ -69,240 +68,79 @@
69
68
  ],
70
69
  },
71
70
  ];
72
-
73
- export const data = [
74
- {
75
- firstName: 'Alice',
76
- lastName: 'Johnson',
77
- age: 9,
78
- gender: 'F',
79
- grade: 4,
80
- },
81
- {
82
- firstName: 'Mike',
83
- lastName: 'Ford',
84
- age: 5,
85
- gender: 'M',
86
- grade: 1,
87
- },
88
- {
89
- firstName: 'John',
90
- lastName: 'Smith',
91
- age: 8,
92
- gender: 'M',
93
- grade: 4,
94
- },
95
- {
96
- firstName: 'Joe',
97
- lastName: 'Johnson',
98
- age: 11,
99
- gender: 'M',
100
- grade: 6,
101
- },
102
- {
103
- firstName: 'Linda',
104
- lastName: 'Ford',
105
- age: 8,
106
- gender: 'F',
107
- grade: 5,
108
- },
109
- {
110
- firstName: 'Noah',
111
- lastName: 'Wilson',
112
- age: 9,
113
- gender: 'M',
114
- grade: 3,
115
- },
116
- {
117
- firstName: 'Emma',
118
- lastName: 'Lee',
119
- age: 7,
120
- gender: 'F',
121
- grade: 3,
122
- },
123
- {
124
- firstName: 'James',
125
- lastName: 'Jones',
126
- age: 10,
127
- gender: 'M',
128
- grade: 5,
129
- },
130
- {
131
- firstName: 'Mia',
132
- lastName: 'Brown',
133
- age: 8,
134
- gender: 'F',
135
- grade: 5,
136
- },
137
- {
138
- firstName: 'William',
139
- lastName: 'Davis',
140
- age: 11,
141
- gender: 'M',
142
- grade: 6,
143
- },
144
- ];
145
71
  ```
146
72
 
147
73
  ```TypeScript
148
- import React, { useMemo } from "react";
74
+ import React, { useMemo } from 'react';
149
75
  import { Column } from "react-table";
150
76
 
77
+ export interface Data {
78
+ firstName: string;
79
+ lastName: string;
80
+ age: number;
81
+ gender: string;
82
+ grade: number;
83
+ }
84
+
151
85
  export const columns: Column<Data>[] = [
152
86
  {
153
- Header: "Name",
87
+ Header: 'Name',
154
- Footer: info => {
155
- const count = useMemo(() => info.rows.length, [info.rows]);
88
+ Footer: info => `Count: ${info.rows.length}`,
156
-
157
- return `Count: ${count}`;
158
- },
159
89
  columns: [
160
90
  {
161
- Header: "First Name",
91
+ Header: 'First Name',
162
92
  Footer: <hr />,
163
- accessor: "firstName",
93
+ accessor: 'firstName',
164
- filter: (rows, columnIds, filterValue) =>
165
- rows.filter((row) => row.values[columnIds].startsWith(filterValue)),
94
+ filter: (rows, id, filterType) => rows.filter(row => row.values[id].startsWith(filterType)),
166
95
  },
167
96
  {
168
- Header: "Last Name",
97
+ Header: 'Last Name',
169
- accessor: "lastName",
98
+ accessor: 'lastName',
170
99
  },
171
100
  ],
172
101
  },
173
102
  {
174
- Header: "Information",
103
+ Header: 'Information',
175
104
  columns: [
176
105
  {
177
- Header: "Age",
106
+ Header: 'Age',
178
- accessor: "age",
107
+ accessor: 'age',
179
108
  },
180
109
  {
181
- Header: "Gender",
110
+ Header: 'Gender',
182
- accessor: "gender",
111
+ accessor: 'gender',
183
112
  },
184
113
  {
185
114
  Header: info => {
186
- const message = useMemo(() => {
115
+ const message = useMemo(
116
+ () => {
187
- if (info.rows.length === 0) {
117
+ if (info.rows.length === 0) {
188
- return "Unknown";
118
+ return 'Unknown';
189
- }
119
+ }
190
- const range = info.rows.reduce(
120
+ const range = info.rows.reduce((sum, row, i) => {
191
- (sum, row, i) => {
192
121
  if (i === 0) {
193
122
  return sum;
194
123
  }
195
- return {
124
+ return {min: Math.min(sum.min, row.values.grade), max: Math.max(sum.max, row.values.grade)}
196
- min: Math.min(sum.min, row.values.grade),
125
+ }, {min: info.rows[0].values.grade, max: info.rows[0].values.grade});
197
- max: Math.max(sum.max, row.values.grade),
126
+ return `${range.min} - ${range.max}`;
198
- };
199
- },
127
+ },
200
- { min: info.rows[0].values.grade, max: info.rows[0].values.grade }
201
- );
202
- return `${range.min} - ${range.max}`;
203
- }, [info.rows]);
128
+ [info.rows]
204
-
129
+ )
130
+
205
- return `Grade: (${message})`;
131
+ return `Grade: (${message})`
206
132
  },
207
- accessor: "grade",
133
+ accessor: 'grade',
208
134
  },
209
135
  ],
210
136
  },
211
137
  ];
212
-
213
- export interface Data {
214
- firstName: string;
215
- lastName: string;
216
- age: number;
217
- gender: string;
218
- grade: number;
219
- }
220
-
221
- export const data: Data[] = [
222
- {
223
- firstName: "Alice",
224
- lastName: "Johnson",
225
- age: 9,
226
- gender: "F",
227
- grade: 4,
228
- },
229
- {
230
- firstName: "Mike",
231
- lastName: "Ford",
232
- age: 5,
233
- gender: "M",
234
- grade: 1,
235
- },
236
- {
237
- firstName: "John",
238
- lastName: "Smith",
239
- age: 8,
240
- gender: "M",
241
- grade: 4,
242
- },
243
- {
244
- firstName: "Joe",
245
- lastName: "Johnson",
246
- age: 11,
247
- gender: "M",
248
- grade: 6,
249
- },
250
- {
251
- firstName: "Linda",
252
- lastName: "Ford",
253
- age: 8,
254
- gender: "F",
255
- grade: 5,
256
- },
257
- {
258
- firstName: "Noah",
259
- lastName: "Wilson",
260
- age: 9,
261
- gender: "M",
262
- grade: 3,
263
- },
264
- {
265
- firstName: "Emma",
266
- lastName: "Lee",
267
- age: 7,
268
- gender: "F",
269
- grade: 3,
270
- },
271
- {
272
- firstName: "James",
273
- lastName: "Jones",
274
- age: 10,
275
- gender: "M",
276
- grade: 5,
277
- },
278
- {
279
- firstName: "Mia",
280
- lastName: "Brown",
281
- age: 8,
282
- gender: "F",
283
- grade: 5,
284
- },
285
- {
286
- firstName: "William",
287
- lastName: "Davis",
288
- age: 11,
289
- gender: "M",
290
- grade: 6,
291
- },
292
- {
293
- firstName: "Abc",
294
- lastName: "Xyz",
295
- age: 20,
296
- gender: "F",
297
- grade: 6,
298
- },
299
- ];
300
138
  ```
301
139
 
302
140
  ### 試したこと
303
141
 
304
- any型やtoString()はエラー回避はできます。
142
+ any型やtoString()でエラー回避はできます。
305
- しかし、根本的な解決（型を定義するなど）ではないので、どう対応したらよいのかわかりません。
143
+ しかし、根本的な解決ではありませんでした。
306
144
 
307
145
  ### 補足情報（FW/ツールのバージョンなど）
308
146
 

2

軽微な編集

2021/11/30 07:48

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -5,8 +5,6 @@
5
5
  以下に記載のJavaScriptをTypeScriptのように変換していたところ、エラーが発生し、その一部が解決できず困っております。
6
6
  ご助力よろしくお願いいたします。
7
7
 
8
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
9
-
10
8
  ### TypeScript 18行目の[columnIds]部分
11
9
 
12
10
  ```

1

ソース内容変更

2021/11/30 02:24

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -165,7 +165,6 @@
165
165
  accessor: "firstName",
166
166
  filter: (rows, columnIds, filterValue) =>
167
167
  rows.filter((row) => row.values[columnIds].startsWith(filterValue)),
168
- row.values[columnIds.toString()].startsWith(filterValue)),
169
168
  },
170
169
  {
171
170
  Header: "Last Name",