typechecking AgGridReact

Question

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

typescript@3.9.6
@ag-grid-community/react@23.2.1
@ag-grid-enterprise/all-modules@23.2.1

I've also used:

typescript@3.9.6
ag-grid-community@23.2.1
ag-grid-enterprise@23.2.1
ag-grid-react@23.2.1

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

It's not a problem with the ag-grid, it is about how you defined your component. In your code you say:

export class Test extends React.Component {
 // ...
}

If you look at the definition of React.Component type you'll see that it is generic and can accept up to three type arguments:

interface Component<P = {}, S = {}, SS = any> {
 // ...
}

The first type argument, P, is the type of the props. The second one, S is the type of the state, the third one, SS, is the type of state snapshot, something you don't need to care very much in your example.

Since you are not providing any type arguments to React.Component, TypeScript uses the default ones ({} for props and {} for state):

// To TypeScript your code looks like:
export class Test extends React.Component<{}, {}, {}> {
 //                                           ^
 //                              This is the type of your state
}

So TypeScript thinks the state of your component is {} and therefore has no property columnDefs or rowData!

To fix this, provide a type of your state:

interface TestState {
  columnDefs: SomeColumnType[];
  rowData: SomeRowObject[];
}

// You should also maybe define a type for props but that's not your question
export class Test extends React.Component<{}, TestState> {
  // WORKS!!!
}

Answer 2

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.