反应表打字稿“类型不可分配”答案

【问题标题】：React Table Typescript "Type is not assignable"反应表打字稿“类型不可分配”
【发布时间】：2022-01-21 11:24:06
【问题描述】：

我已经使用 Typescript 和 React-Table 设置了我的 React 项目。我在 React-Table 网站上关注 Quick Start Guide 时遇到了错误。

 const data = React.useMemo(
   () => [
     {
       col1: 'Hello',
       col2: 'World',
     },
     {
       col1: 'react-table',
       col2: 'rocks',
     },
     {
       col1: 'whatever',
       col2: 'you want',
     },
   ],
   []
 )

const columns = React.useMemo(
    () => [
      {
        Header: 'Column 1',
        accessor: 'col1', // accessor is the "key" in the data
      },
      {
        Header: 'Column 2',
        accessor: 'col2',
      },
    ],
    []
  )

我在执行const tableInstance = useTable({ columns, data }) 时遇到错误。

类型'{标题：字符串；访问器：字符串； }[]' 不能分配给类型 'readonly Column[]'。输入'{标题：字符串；访问器：字符串； }' 不可分配给类型 'Column'。

我才刚刚开始接触这个，所以我真的不知道发生了什么。这是一个重现问题的代码沙箱：Sandbox

【问题讨论】：

沙盒为空。请更新
@TusharShahi 沙盒已更新。

标签： typescript react-table

【解决方案1】：

TypeScript 似乎在类型推断上失败了，所以我给了他提示

引入新类型type Cols = { col1: string; col2: string };
明确说明const columns: Column<Cols>[] = ... 的类型

完整的工作示例在这里：

import { useTable, TableOptions, Column } from "react-table";
import React from "react";

type Cols = { col1: string; col2: string };

export default function App() {
  const data = React.useMemo(
    (): Cols[] => [
      {
        col1: "Hello",
        col2: "World"
      },
      {
        col1: "react-table",
        col2: "rocks"
      },
      {
        col1: "whatever",
        col2: "you want"
      }
    ],
    []
  );

  const columns: Column<{ col1: string; col2: string }>[] = React.useMemo(
    () => [
      {
        Header: "Column 1",
        accessor: "col1" // accessor is the "key" in the data
      },
      {
        Header: "Column 2",
        accessor: "col2"
      }
    ],
    []
  );

  const options: TableOptions<{ col1: string; col2: string }> = {
    data,
    columns
  };

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable(options);

  return (
    <table {...getTableProps()} style={{ border: "solid 1px blue" }}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps()}
                style={{
                  borderBottom: "solid 3px red",
                  background: "aliceblue",
                  color: "black",
                  fontWeight: "bold"
                }}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td
                    {...cell.getCellProps()}
                    style={{
                      padding: "10px",
                      border: "solid 1px gray",
                      background: "papayawhip"
                    }}
                  >
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

【讨论】：