reactjs - typekontroll Av AgGridReact

Jeg bruker Typescript med ag-grid med følgende konfigurasjon.

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

Jeg har også brukt:

[email 
[email 
[email 
[email 

I begge tilfeller feiler følgende kode å typekontrollere. Merk at koden er tatt nesten ordrett fra nettbasert dokumentasjon på 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 klager med:

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<{}>'.

Hvordan kan jeg komme forbi denne typekontrollfeilen?

Svar #1

Det som fungerte for meg, var å importere følgende type:

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

... og deretter skrev inn columnDefs som ColDef[]. Det fjernet typen-sjekk problemet.

Svar #2

Det er ikke et problem med ag-grid, det handler om hvordan du definerte komponenten din. I koden din sier du:

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

Hvis du ser på definisjonen av React.Component-typen, vil du se at den er generell og kan akseptere opptil tre typeargumenter:

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

Den første typeargumentet, P, er typen til propsene. Den andre, S, er typen til staten, den tredje, SS, er typen til statssnapshottet, noe du ikke trenger å bry deg så mye om i ditt eksempel.

Siden du ikke oppgir noen typeargumenter til React.Component, bruker TypeScript standardene ({} for props og {} for state):

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

Så TypeScript tror at state til komponenten din er {} og derfor har ingen egenskap columnDefs eller rowData!

For å fikse dette, oppgi en type for din 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!!!
}

Relaterte artikler