проверка типов AgGridReact

Question

Я использую Typescript с ag-сеткой со следующей конфигурацией.

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

Я также использовал:

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

В обоих случаях следующий код не проходит проверку типов. Обратите внимание, что код почти дословно взят из онлайн-документации по адресу 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>
    );
  }
}

Машинописец жалуется на:

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

Как я могу пройти это ошибка проверки типов?

Answer 1

Это не проблема ag-grid, это касается того, как вы определили свой компонент. В вашем коде вы говорите:

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

Если вы посмотрите на определение типа React.Component, вы увидите, что это generi c и может принимать до трех аргументов типа:

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

Первый аргумент типа, P, является типом свойств. Второй, S, - это тип состояния, третий, SS, - тип снимка состояния, о чем вам не нужно особо заботиться в вашем примере.

Поскольку вы не предоставляете аргументы типа для React.Component, TypeScript использует значения по умолчанию ({} для реквизита и {} для состояния):

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

Итак, TypeScript считает state вашего компонента {} и, следовательно, не имеет свойства columnDefs или rowData!

Чтобы исправить это, укажите тип вашего 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

Что сработало для меня, так это импорт следующего типа:

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

... и затем ввод columnDefs как ColDef[]. Это избавило от проблемы проверки типов.