类型检查 AgGridReact

Question

我将 Typescript 与具有以下配置的 ag-grid 一起使用。

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>
    );
  }
}

Typescript 抱怨：

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

对我有用的是导入以下类型：

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

... 然后将 columnDefs 键入 ColDef[]。这解决了类型检查问题。

Answer 2

这不是 ag-grid 的问题，而是关于您如何定义组件的问题。在你的代码中你说：

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

如果您查看 React.Component 类型的定义，您会发现它是通用的并且最多可以接受三个类型参数：

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

第一个类型参数，P，是道具的类型。第二个 S 是状态的类型，第三个 SS 是状态快照的类型，在您的示例中您不需要非常关心。

由于您没有向 React.Component 提供任何类型参数，TypeScript 使用默认参数（{} 用于 props，{} 用于状态）：

// 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!!!
}

类型检查 AgGridReact

typechecking AgGridReact

typescript

reactjs

ag-grid

ag-grid-react