如何解决AgGridReact中columnDefs与GridReadyEvent的TypeScript类型错误？

错误1：RhRichGridColumn[] 无法赋值给 (ColDef<any, any> | ColGroupDef)[] #

核心问题是RhRichGridColumn未与AG Grid的ColDef类型建立兼容关系，提供两种解决方式：

方式1：让自定义列类型继承ColDef #

修改RhRichGridColumn的定义，让它继承对应数据类型IOlympicData的ColDef，同时保留自定义属性：

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

type RhRichGridColumn = ColDef<IOlympicData> & {
  // 这里添加你的自定义列属性
  customField?: string;
};

这样RhRichGridColumn[]会自动兼容AG Grid要求的列定义类型，从根源解决类型不匹配问题。

方式2：临时类型断言 #

如果暂时无法修改RhRichGridColumn的定义，可在传递列数据时用类型断言明确告知TypeScript类型兼容：

<AgGridReact
  columnDefs={yourRichColumns as ColDef<IOlympicData>[]}
  // 其他组件属性
/>

注意：此方案适合临时场景，长期推荐方式1以避免潜在类型风险。

错误2：(params: GridReadyEvent) => void 无法赋值给 (event: GridReadyEvent<any, any>) => void #

该错误源于GridReadyEvent是泛型类型，需为其指定对应的数据泛型参数：

修改事件处理函数的参数类型，匹配你的数据类型IOlympicData：

import { GridReadyEvent } from 'ag-grid-react';

const onGridReady = (params: GridReadyEvent<IOlympicData>) => {
  // 你的网格初始化逻辑
};

若不需要严格的数据类型约束，也可直接使用GridReadyEvent<any, any>作为参数类型，确保与AG Grid的回调类型完全匹配。

内容的提问来源于stack exchange，提问作者amir tbi