React-table格式化列添加filterMethod报TypeScript类型错误如何解决

问题原因 #

这个报错是因为react-table采用插件化设计，默认导出的基础Column类型没有包含筛选功能相关的属性，同时如果你用的是v7及以上版本，原来的filterMethod字段已经重命名为filter，字段名写错也会触发该报错。

解决步骤 #

• 第一步：核对字段名，v6版本用filterMethod，v7及以上版本将自定义筛选方法的字段改为filter
• 第二步：扩展react-table的TS类型声明，支持筛选相关属性
  新建react-table.d.ts类型声明文件放在项目的类型目录（比如@types或者src目录下），内容如下：

  import { FilterType, Column } from 'react-table';
  
  declare module 'react-table' {
    export interface Column<D extends Record<string, unknown> = Record<string, unknown>> {
      // 根据你使用的版本保留对应字段即可
      filterMethod?: FilterType<D>;
      filter?: FilterType<D>;
    }
  }
  

• 第三步：确保初始化表格时已经注册了筛选插件

  import { useTable, useFilters } from 'react-table';
  
  const tableInstance = useTable(
    { columns, data },
    useFilters // 必须注册该插件才能使用筛选功能
  );
  

临时规避方案 #

如果不需要严格的类型校验，可以给列对象加类型断言临时解决报错：

{
  // 其他列配置...
  filterMethod: (filter: any, row: any) => {
    return row[filter.id] === filter.value;
  }
} as any

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