質問編集履歴

タイトル変更

2021/11/30 07:50

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- React-Table使用のJavaScriptをTypeScriptへ変換する
1	+ React-Tableを使用したJavaScriptをTypeScriptへ変換する件

test CHANGED Viewed

File without changes

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

2021/11/30 07:50

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~JavaScriptを使用した~~React-TableをTypeScriptへ置換~~したい~~
1	+ React-Table使用のJavaScriptをTypeScriptへ変換する

test CHANGED Viewed

@@ -1,18 +1,16 @@
 ### 前提・実現したいこと
-次のサイトを参考に、React-Tableを使用したデータテーブルを作成しています。
-[React Tableの紹介](https://ichi.pro/react-table-no-shokai-121758914446750)
+[React Tableの紹介](https://ichi.pro/react-table-no-shokai-121758914446750)を参考に、React-Tableを使用したデータテーブルを作成しています。
-主に【行選択のあるテーブル】を参照中、、
+今回の問題は【フィルター付きテーブル】の部分です。
-以下に記載のJavaScriptをTypeScriptのように変換していたところ、エラーが発生し、その一部が解決できず困っております。
+以下へ記載するJavaScriptをTypeScriptへ変換したところ、エラーが発生しました。
-ご助力よろしくお願いいたします。
+一部のエラーが解決できませんでしたので、ご助力よろしくお願いいたします。
-### TypeScript 18行目の[columnIds]部分
+### TypeScript 21行目の"[id]"部分
@@ -140,147 +138,135 @@
 ];
-export const data = [
-  {
-    firstName: 'Alice',
-    lastName: 'Johnson',
-    age: 9,
-    gender: 'F',
-    grade: 4,
-  },
-  {
-    firstName: 'Mike',
-    lastName: 'Ford',
-    age: 5,
-    gender: 'M',
-    grade: 1,
-  },
-  {
-    firstName: 'John',
-    lastName: 'Smith',
-    age: 8,
-    gender: 'M',
-    grade: 4,
-  },
-  {
-    firstName: 'Joe',
-    lastName: 'Johnson',
-    age: 11,
-    gender: 'M',
-    grade: 6,
-  },
-  {
-    firstName: 'Linda',
-    lastName: 'Ford',
-    age: 8,
-    gender: 'F',
-    grade: 5,
-  },
-  {
-    firstName: 'Noah',
-    lastName: 'Wilson',
-    age: 9,
-    gender: 'M',
-    grade: 3,
-  },
-  {
-    firstName: 'Emma',
-    lastName: 'Lee',
-    age: 7,
-    gender: 'F',
-    grade: 3,
-  },
-  {
-    firstName: 'James',
-    lastName: 'Jones',
-    age: 10,
-    gender: 'M',
-    grade: 5,
-  },
-  {
-    firstName: 'Mia',
-    lastName: 'Brown',
-    age: 8,
-    gender: 'F',
-    grade: 5,
-  },
-  {
-    firstName: 'William',
-    lastName: 'Davis',
-    age: 11,
-    gender: 'M',
-    grade: 6,
+```
+```TypeScript
+import React, { useMemo } from 'react';
+import { Column } from "react-table";
+export interface Data {
+  firstName: string;
+  lastName: string;
+  age: number;
+  gender: string;
+  grade: number;
+}
+export const columns: Column<Data>[] = [
+  {
+    Header: 'Name',
+    Footer: info => `Count: ${info.rows.length}`,
+    columns: [
+      {
+        Header: 'First Name',
+        Footer: <hr />,
+        accessor: 'firstName',
+        filter: (rows, id, filterType) => rows.filter(row => row.values[id].startsWith(filterType)),
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+      },
+    ],
+  },
+  {
+    Header: 'Information',
+    columns: [
+      {
+        Header: 'Age',
+        accessor: 'age',
+      },
+      {
+        Header: 'Gender',
+        accessor: 'gender',
+      },
+      {
+        Header: info => {
+          const message = useMemo(
+            () => {
+              if (info.rows.length === 0) {
+                return 'Unknown';
+              }
+              const range = info.rows.reduce((sum, row, i) => {
+                if (i === 0) {
+                  return sum;
+                }
+                return {min: Math.min(sum.min, row.values.grade), max: Math.max(sum.max, row.values.grade)}
+              }, {min: info.rows[0].values.grade, max: info.rows[0].values.grade});
+              return `${range.min} - ${range.max}`;
+            },
+            [info.rows]
+          )
+          return `Grade: (${message})`
+        },
+        accessor: 'grade',
+      },
+    ],
   },
@@ -290,323 +276,13 @@
-```TypeScript
-import React, { useMemo } from "react";
-import { Column } from "react-table";
-export const columns: Column<Data>[] = [
-  {
-    Header: "Name",
-    Footer: info => {
-      const count = useMemo(() => info.rows.length, [info.rows]);
-      return `Count: ${count}`;
-    },
-    columns: [
-      {
-        Header: "First Name",
-        Footer: <hr />,
-        accessor: "firstName",
-        filter: (rows, columnIds, filterValue) =>
-          rows.filter((row) => row.values[columnIds].startsWith(filterValue)),
-      },
-      {
-        Header: "Last Name",
-        accessor: "lastName",
-      },
-    ],
-  },
-  {
-    Header: "Information",
-    columns: [
-      {
-        Header: "Age",
-        accessor: "age",
-      },
-      {
-        Header: "Gender",
-        accessor: "gender",
-      },
-      {
-        Header: info => {
-          const message = useMemo(() => {
-            if (info.rows.length === 0) {
-              return "Unknown";
-            }
-            const range = info.rows.reduce(
-              (sum, row, i) => {
-                if (i === 0) {
-                  return sum;
-                }
-                return {
-                  min: Math.min(sum.min, row.values.grade),
-                  max: Math.max(sum.max, row.values.grade),
-                };
-              },
-              { min: info.rows[0].values.grade, max: info.rows[0].values.grade }
-            );
-            return `${range.min} - ${range.max}`;
-          }, [info.rows]);
-          return `Grade: (${message})`;
-        },
-        accessor: "grade",
-      },
-    ],
-  },
-];
-export interface Data {
-  firstName: string;
-  lastName: string;
-  age: number;
-  gender: string;
-  grade: number;
-}
-export const data: Data[] = [
-  {
-    firstName: "Alice",
-    lastName: "Johnson",
-    age: 9,
-    gender: "F",
-    grade: 4,
-  },
-  {
-    firstName: "Mike",
-    lastName: "Ford",
-    age: 5,
-    gender: "M",
-    grade: 1,
-  },
-  {
-    firstName: "John",
-    lastName: "Smith",
-    age: 8,
-    gender: "M",
-    grade: 4,
-  },
-  {
-    firstName: "Joe",
-    lastName: "Johnson",
-    age: 11,
-    gender: "M",
-    grade: 6,
-  },
-  {
-    firstName: "Linda",
-    lastName: "Ford",
-    age: 8,
-    gender: "F",
-    grade: 5,
-  },
-  {
-    firstName: "Noah",
-    lastName: "Wilson",
-    age: 9,
-    gender: "M",
-    grade: 3,
-  },
-  {
-    firstName: "Emma",
-    lastName: "Lee",
-    age: 7,
-    gender: "F",
-    grade: 3,
-  },
-  {
-    firstName: "James",
-    lastName: "Jones",
-    age: 10,
-    gender: "M",
-    grade: 5,
-  },
-  {
-    firstName: "Mia",
-    lastName: "Brown",
-    age: 8,
-    gender: "F",
-    grade: 5,
-  },
-  {
-    firstName: "William",
-    lastName: "Davis",
-    age: 11,
-    gender: "M",
-    grade: 6,
-  },
-  {
-    firstName: "Abc",
-    lastName: "Xyz",
-    age: 20,
-    gender: "F",
-    grade: 6,
-  },
-];
-```
 ### 試したこと
-any型やtoString()はエラー回避はできます。
+any型やtoString()でエラー回避はできます。
-しかし、根本的な解決（型を定義するなど）ではないので、どう対応したらよいのかわかりません。
+しかし、根本的な解決ではありませんでした。

軽微な編集

2021/11/30 07:48

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -12,10 +12,6 @@
-■■な機能を実装中に以下のエラーメッセージが発生しました。
 ### TypeScript 18行目の[columnIds]部分

ソース内容変更

2021/11/30 02:24

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -332,8 +332,6 @@
           rows.filter((row) => row.values[columnIds].startsWith(filterValue)),
-row.values[columnIds.toString()].startsWith(filterValue)),
       },
       {