React Material Table抽离列配置使用render出现TS类型错误如何解决

这个报错是因为TableColumn默认的行数据泛型是空对象{}，没有显式声明的属性都会被TS判定为不存在。可以用以下几种方案解决：

方案1：给列配置指定泛型（最推荐） #

首先定义你的行数据的实际业务类型：

// 字段和类型根据你的实际业务调整
interface AuditRow {
  type_of_action: string;
  description: string;
  reference_id: string;
  environment: string;
  severity: string;
  priority: 'low' | 'medium' | 'high';
  action?: string;
  // 其余行字段可自行补充
}

声明columns时给TableColumn传入你定义的行类型作为泛型参数即可：

// 注意TableColumn后追加泛型<AuditRow>
const columns: TableColumn<AuditRow>[] = [
    {
        title: 'TYPE',
        field: 'type_of_action',
        highlight: true,
    },
    // 其余列配置保持不变
    {
        title: 'ACTION',
        field: 'action',
        // rowData会自动识别为AuditRow类型，访问priority不会触发类型报错
        render: (rowData) => {
            console.log(rowData.priority)
        },
    }
];

该方案类型安全性最高，所有列的field字段、render方法参数都会自动做类型校验，写错字段名TS会提前提示。

方案2：仅给render参数做类型断言 #

如果你不想修改整体columns的类型声明，只需要处理这一处render的报错，可以直接给rowData加类型限定：

// 方式1：直接指定参数类型
render: (rowData: AuditRow) => {
  console.log(rowData.priority)
}

// 方式2：临时断言，适合只需要访问一次属性的场景
render: (rowData) => {
  console.log((rowData as AuditRow).priority)
}

方案3：通过map做类型适配 #

如果你需要按你提到的map处理思路实现，可以参考以下写法：

// 抽离的列配置可以不用强制定TableColumn类型
const rawColumns = [
  // 你原本的所有列配置
]

// 组件内使用时做map适配
<MaterialTable
  columns={rawColumns.map(col => {
    if (col.render) {
      return {
        ...col,
        render: (rowData: AuditRow) => col.render(rowData)
      }
    }
    return col
  }) as TableColumn<AuditRow>[]}
  // 其余组件属性保持不变
/>

该方案灵活性较高但写法冗余，更推荐优先使用方案1。

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