React类组件转TypeScript时AG Grid的onCellClicked参数类型报错如何解决

核心问题是ag-grid的onCellClicked回调参数是框架自定义的封装类型，并非原生React事件，所以你之前标注的React.ChangeEvent、MouseEvent都无法匹配。具体修改如下：

核心修改点 #

• 从ag-grid社区包导入所需的事件和配置类型
• 修正Props类型定义，补充缺失的noHoverEffect属性，移除冲突的错误onCellClicked类型定义
• 为onCellClicked方法的params参数标注正确的CellClickedEvent类型
• 补全缺失的事件方法定义，或移除未实现的事件绑定
• 替换无意义的any类型为对应业务/官方类型

完整修改后代码 #

import React, { Component } from 'react';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import { CellClickedEvent, ColDef, RowEditingStartedEvent, RowEditingStoppedEvent } from 'ag-grid-community';
import './Grid.scss';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

// 自定义行数据类型，可根据实际业务字段调整
type RowData = {
  id: number;
  name: string;
  description: string;
  created: string;
  created_By: string;
  [key: string]: any;
}

type MyProps = {
  className?: string;
  rowData: RowData[];
  columns: ColDef[];
  updateRecord: (id: number, name: string, description: string, created: string, createdBy: string) => void;
  onDeleteRecord: (data: RowData) => void;
  noHoverEffect?: boolean;
};

type MyState = Record<string, never>;

export default class Grid extends Component<MyProps, MyState> {
  constructor(props: MyProps) {
    super(props);
    this.state = {};
  }

  onCellClicked = (params: CellClickedEvent<RowData>) => {
    // Handle click event for action cells
    if (params.column.colId === "Action" && params.event.target.dataset.action) {
      let action = params.event.target.dataset.action;

      if (action === "update") {
        this.props.updateRecord(
          params.node.data.id,
          params.node.data.name,
          params.node.data.description,
          params.node.data.created,
          params.node.data.created_By
        );
      }

      if (action === "delete") {
        this.props.onDeleteRecord(params.node.data)
      }
    }
  }

  // 补充之前缺失的两个编辑事件方法，不需要的话可以直接删掉AgGridReact上对应的绑定
  onRowEditingStarted = (params: RowEditingStartedEvent<RowData>) => {
    // 你的编辑开始逻辑
  }

  onRowEditingStopped = (params: RowEditingStoppedEvent<RowData>) => {
    // 你的编辑结束逻辑
  }

  render() {
    const gridOptions = {
      getRowStyle: params => {
        if (params.node.rowIndex % 2 === 1) {
          return { background: '#ebebeb73' };
        }
      },
    };

    return (
      <div className={["sct-grid", this.props.className, this.props.noHoverEffect && "nohover"].filter(Boolean).join(" ")}>
        <AgGridReact 
          gridOptions={gridOptions}
          alignedGrid="true"
          suppressDragLeaveHidesColumns={true}
          pagination={true}
          paginationPageSize={7}
          rowData={this.getitems()}
          onRowEditingStopped={this.onRowEditingStopped}
          onRowEditingStarted={this.onRowEditingStarted}
          onCellClicked={this.onCellClicked}
          editType="fullRow"
          suppressClickEdit={true}
          enableRangeSelection={true}
          columnDefs={this.props.columns}
        >
          {/* { this.getColumns()}*/}
        </AgGridReact>
      </div>
    );
  }

  getitems() {
    return this.props.rowData;
  }

  getColumns() {
    var listOfColumns: JSX.Element[] = [];
    if (this.props.columns) {
      this.props.columns.forEach(column => {
        listOfColumns.push(<AgGridColumn key={column.field} minWidth="80" maxWidth="120" field={column.field} sortable={column.sortable} filter={column.filter}></AgGridColumn>);
      });
    }
    return listOfColumns;
  };
};

内容的提问来源于stack exchange，提问作者Abhishek kumar