类型“{}”缺少类型“(ColGroupDef | ColDef)[]”中的以下属性：length、pop、push、concat 以及其他 25 个

Question

我正在使用 TypeScript 中的 AG-Grid 和 React。我正在尝试构建此组件，而且我快完成了。代码有效，但我的 linter 在调用列定义 (columnDefs) 和行数据 (rowData) 时显示 2 个错误。

错误读取：

"Type '{}' is missing the following properties from type '(ColGroupDef | ColDef)[]': length, pop, push, concat, and 25 more" [133:25]
"Type '{}' is missing the following properties from type 'any[]': length, pop, push, concat, and 25 more." [134:25]

我假设这与 TypeScript 语法有关...

这是我的代码：

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { AgGridReact } from "@ag-grid-community/react"
import { AllCommunityModules } from "@ag-grid-community/all-modules"
import styled from "styled-components"

import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css"
import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material.css"

interface MyProps {}

interface MyState {
    columnDefs: object;
    rowData: object;
}

const StyledTable = styled.div`
    width: 100%;
    height: 100%;
    font-family: OpenSans-Bold;
`

export class Automation_Table extends React.Component<MyProps, MyState> {
    //Set the data for the Table
    constructor(props) {
        super(props)
        this.state = {
            //Set the Columns
            columnDefs: [
                {
                    headerName: "Action Name",
                    field: "actionName",
                },
                {
                    headerName: "Action Description",
                    field: "actionDescription",
                },
                ...
                {
                    headerName: "Details",
                    field: "details",
                },
            ],
            //Set the actual data
            rowData: [
                {
                    actionName: "Lorem Ipsum",
                    actionDescription:
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tellus neque, lobortis sit amet varius vitae, vestibulum vel nisi.",
                    status: "Successful",
                    lastUpdate: "10/03/2019 8:33:15 PM",
                    actionRequired: "No",
                    details: "View",
                },
                ...
                {
                    actionName: "Lorem Ipsum",
                    actionDescription:
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tellus neque, lobortis sit amet varius vitae, vestibulum vel nisi.",
                    status: "Failed",
                    lastUpdate: "10/01/2019 6:46:26 PM",
                    actionRequired: "Yes",
                    details: "View",
                },
            ],
        }
    }

    render() {
        return (
            <StyledTable>
                <Frame
                    style={{ height: "368px", width: "784px", background: "#FAFAFA" }}
                    className="ag-theme-material"
                >
                    <AgGridReact
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}
                        modules={AllCommunityModules}
                    ></AgGridReact>
                </Frame>
            </StyledTable>
        )
    }
}

以下几行的错误

<AgGridReact
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}
    modules={AllCommunityModules}
></AgGridReact>

Answer 1

像这样更改 MyState 应该可以解决问题：

interface MyState {
    columnDefs: Array<ColGroupDef | ColDef>;
    rowData: Array<any>;
}

您应该尽可能避免使用 any。

类型“{}”缺少类型“(ColGroupDef | ColDef)[]”中的以下属性：length、pop、push、concat 以及其他 25 个

Type '{}' is missing the following properties from type '(ColGroupDef | ColDef)[]': length, pop, push, concat, and 25 more

typescript

reactjs

ag-grid-react