React+TypeScript中AgGridReact报No overload matches this call如何定义接口

报错原因 #

该报错是传递给AgGridReact的属性与组件官方要求的类型定义不匹配导致，代码里存在3个直接触发报错的问题：

• alignedGrid属性传入了字符串"true"，该属性要求布尔值类型
• 给组件传递了onRowEditingStarted、onRowEditingStopped两个回调属性，但组件类中没有实现这两个方法
• 所有属性全用any声明，没有用到AgGrid官方提供的类型定义做校验，容易出现类型不匹配问题

修复步骤 #

1. 导入官方提供的类型定义，替换无关的any声明：

// 顶部导入类型
import type { AgGridReactProps, ColDef } from 'ag-grid-react';

// 修改MyProps类型
type MyProps = {
    className?: string
    rowData: Record<string, any>[]
    columns: ColDef[]
    updateRecord: (id: number|string, name: string, description: string, created: string, createdBy: string) => void
    onDeleteRecord: (rowData: Record<string, any>) => void
    noHoverEffect?: boolean
    gridOptions?: AgGridReactProps['gridOptions']
    onRowEditingStopped?: (params: any) => void
};

2. 修复属性类型错误，把alignedGrid="true"改成alignedGrid={true}
3. 要么删除AgGridReact上的onRowEditingStarted、onRowEditingStopped属性传递，要么补写对应的实现方法：

// 类中补写缺失的方法示例
onRowEditingStarted = (params: any) => {
  // 编辑开始逻辑
}
onRowEditingStopped = (params: any) => {
  // 编辑停止逻辑
  this.props.onRowEditingStopped?.(params);
}

4. 应急临时绕过类型校验（不推荐长期使用），可以在AgGridReact组件标签上方加一行{/* @ts-ignore */}忽略当前行的类型检查。

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