typechecking AgGridReact

Question

I use Typescript with ag-grid with the following configuration.

[email protected]
@ag-grid-community/[email protected]
@ag-grid-enterprise/[email protected]

I've also used:

[email protected]
[email protected]
[email protected]
[email protected]

In both cases, the following code fails to typecheck. Note that the code is taken almost verbatim from the online documentation at https://www.ag-grid.com/react-column-configuration/:

import React from 'react';
import { AgGridReact } from '@ag-grid-community/react';

export class Test extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      columnDefs: [
        { headerName: "Make", field: "make", sortable: true, filter: true}
      ],
      rowData: [
        { make: "Toyota"},
        { make: "Ford"},
        { make: "Porsche"}
      ]
    }
  }

  render() {
    return (
      <div className="ag-theme-alpine">
        <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}>
        </AgGridReact>
      </div>
    );
  }
}

Typescript complains with:

ERROR in /home/.../filename.tsx
[tsl] ERROR in /home/....tsx(23,40)
  TS2339: Property 'columnDefs' does not exist on type 'Readonly<{}>'.

ERROR in /home/.../filename.tsx
[tsl] ERROR in /home/.../tsx (24,37)
  TS2339: Property 'rowData' does not exist on type 'Readonly<{}>'.

How can I get past this type-checking error?

Answer 1

What worked for me was importing the following type:

import { ColDef } from 'ag-grid-community';

... and then typing the columnDefs as ColDef[]. That got rid of the type-checking problem.