Búsqueda de sitios web

reactjs - verificación de tipos AgGridReact

Uso Typescript con ag-grid con la siguiente configuración.

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

También he usado:

[email 
[email 
[email 
[email 

En ambos casos, el siguiente código no pasa la verificación de tipos. Tenga en cuenta que el código se toma casi textualmente de la documentación en línea en 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 se queja con:

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

¿Cómo puedo superar este error de verificación de tipos?

Respuesta #1

Lo que me funcionó fue importar el siguiente tipo:

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

... y luego escribiendo columnDefs como ColDef[]. Eso eliminó el problema de la verificación de tipos.

Respuesta #2

No es un problema con ag-grid, se trata de cómo definiste tu componente. En tu código dices:

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

Si miras la definición del tipo React.Component, verás que es genérico y puede aceptar hasta tres argumentos de tipo:

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

El primer argumento de tipo, P, es el tipo de las props. El segundo, S, es el tipo del estado, el tercero, SS, es el tipo de instantánea del estado, algo de lo que no necesitas preocuparte mucho en tu ejemplo.

Dado que no estás proporcionando ningún tipo de argumentos a React.Component, TypeScript usa los predeterminados ({} para props y {} para state):

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

¡Entonces TypeScript piensa que el state de tu componente es {} y por lo tanto no tiene la propiedad columnDefs ni rowData!

Para solucionar esto, proporciona un tipo de tu 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!!!
}

Artículos relacionados