TypeScript结合AgGridReact出现类型校验错误的解决方法

这个问题本质是React组件的State类型未显式定义导致的——TypeScript默认会将未指定泛型参数的React.Component的State推断为Readonly<{}>，所以它无法识别你在this.state里定义的columnDefs和rowData属性，从而抛出TS2339错误。结合你使用的ag-grid v23.2.1版本，这里提供两种清晰的修复方案：

方案一：显式定义State接口（推荐） #

这种方式代码可读性更强，也方便后续扩展组件状态：

import React from 'react';
import { AgGridReact } from '@ag-grid-community/react';
// 导入ag-grid官方提供的列定义类型
import { ColDef } from 'ag-grid-community';

// 定义你的行数据类型（根据业务需求扩展）
interface CarRowData {
  make: string;
}

// 定义组件的State类型
interface TestComponentState {
  columnDefs: ColDef[];
  rowData: CarRowData[];
}

// 给React.Component指定泛型：第一个是空Props，第二个是我们定义的State类型
export class Test extends React.Component<{}, TestComponentState> {
  constructor(props: {}) {
    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>
    );
  }
}

关键说明： #

• 我们用TestComponentState接口明确描述了state的结构，让TypeScript能正确识别columnDefs和rowData的类型。
• 使用ag-grid官方提供的ColDef类型约束列配置，既能获得类型提示，也能保证列配置符合ag-grid的要求。
• 组件没有接收外部props，所以React.Component的第一个泛型参数用{}即可，同时把constructor里的props: any改成props: {}，避免滥用any。

方案二：内联State类型（快速修复） #

如果觉得单独定义接口太繁琐，可以直接在React.Component的泛型参数里内联State类型：

import React from 'react';
import { AgGridReact } from '@ag-grid-community/react';
import { ColDef } from 'ag-grid-community';

export class Test extends React.Component<{}, { 
  columnDefs: ColDef[]; 
  rowData: { make: string }[] 
}> {
  constructor(props: {}) {
    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>
    );
  }
}

适配你的两种ag-grid配置 #

不管你用的是@ag-grid-community/react + @ag-grid-enterprise/all-modules的组合，还是ag-grid-community + ag-grid-enterprise + ag-grid-react的组合，ColDef的导入路径都是ag-grid-community——因为ag-grid的核心类型定义都在community包中，两种配置的类型使用方式完全一致。

内容的提问来源于stack exchange，提问作者Marcus Junius Brutus