无法为 React 数据网格设置列。给出不可分配的类型错误

Question

我是 React 和 TypeScript 的新手，我正在尝试根据此处的简单示例制作一个简单的 React 数据网格：https://adazzle.github.io/react-data-grid/docs/quick-start

这是我的资料：

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const columns = [
    { key: "id", name: "ID", editable: true },
    { key: "title", name: "Title", editable: true },
    { key: "complete", name: "Complete", editable: true }
  ];

  const rows = [
    { id: 0, title: "Task 1", complete: 20 },
    { id: 1, title: "Task 2", complete: 40 },
    { id: 2, title: "Task 3", complete: 60 }
  ];


export const DataTable: React.FC = () => {
    return (
        <ReactDataGrid 
            columns={columns}
            rowGetter={i => rows[i]}
            rowsCount={rows.length}
        />
    );
};

然而，我在 link 中不断收到错误，它在 table 中设置列。它说：

(JSX attribute) DataGridProps<{ [x: string]: {}; }, React.ReactText>.columns: (ColumnValue<{
    [x: string]: {};
}, unknown, string> | ColumnValue<{
    [x: string]: {};
}, unknown, number>)[]

    Type '{ key: string; name: string; editable: boolean; }[]' is not assignable to type '(ColumnValue<{ id: number; title: string; complete: number; }, unknown, "id"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "title"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "complete">)[]'.
      Type '{ key: string; name: string; editable: boolean; }' is not assignable to type 'ColumnValue<{ id: number; title: string; complete: number; }, unknown, "id"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "title"> | ColumnValue<{ id: number; title: string; complete: number; }, unknown, "complete">'.
        Type '{ key: string; name: string; editable: boolean; }' is not assignable to type 'ColumnValue<{ id: number; title: string; complete: number; }, unknown, "complete">'.
          Types of property 'key' are incompatible.
            Type 'string' is not assignable to type '"complete"'.ts(2322)
    DataGrid.d.ts(6, 5): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & DataGridProps<{ id: number; title: string; complete: number; }, "id" | "title" | "complete"> & { ref?: ((instance: DataGridHandle | null) => void) | RefObject<...> | null | undefined; }'

谁能帮我解析这个错误？我是否需要将列的类型显式设置为 React 数据网格所期望的类型？

Answer 1

我安装了 react-data-grid 类型，错误消失了：

npm install --save @types/react-data-grid

无法为 React 数据网格设置列。给出不可分配的类型错误

Can't set columns for react data grid. Gives non assignable type error

reactjs

react-data-grid