封装带泛型的Antd Table组件时类型不兼容问题解决

问题根源 #

你遇到的类型不兼容问题，本质是泛型参数不匹配：内部Antd Table默认使用object作为行数据类型，而你的组件接收的是TableProps<RecordType>，两者泛型约束不一致导致类型校验失败。

正确封装方案 #

直接让组件成为泛型组件，严格对齐Antd Table的泛型参数，确保内外类型完全匹配：

基础封装示例

import React from 'react';
import { Table, TableProps } from 'antd';

// 定义泛型组件，RecordType为行数据的类型约束（必须是object）
const GenericTable = <RecordType extends object>(props: TableProps<RecordType>) => {
  // 可添加自定义逻辑，比如设置默认rowKey、处理列配置等
  const tableProps = {
    rowKey: 'id', // 可选：设置默认rowKey，优先级低于props传入的值
    ...props,
  };

  // 关键：给内部Table指定和组件一致的泛型参数RecordType
  return <Table<RecordType> {...tableProps} />;
};

使用示例

// 定义行数据类型
interface User {
  id: number;
  name: string;
  age: number;
}

const UserList = () => {
  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age' },
  ] as const; // as const 让列的类型更严格

  const dataSource: User[] = [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
  ];

  // 使用时指定泛型参数User，自动推导所有相关类型
  return <GenericTable<User> columns={columns} dataSource={dataSource} />;
};

扩展自定义属性 #

如果需要给组件添加Antd Table没有的自定义属性，只需扩展TableProps即可：

import { Table, TableProps, ColumnsType } from 'antd';

// 扩展TableProps，添加自定义属性
interface GenericTableProps<RecordType extends object> extends TableProps<RecordType> {
  // 自定义：是否默认显示选择列
  defaultShowSelection?: boolean;
}

const GenericTable = <RecordType extends object>(props: GenericTableProps<RecordType>) => {
  const { defaultShowSelection, ...tableProps } = props;

  // 处理自定义逻辑：自动添加选择列
  const mergedColumns = defaultShowSelection
    ? [{ type: 'checkbox', key: 'selection' }, ...(tableProps.columns || [])]
    : tableProps.columns;

  return <Table<RecordType> {...tableProps} columns={mergedColumns} />;
};

避坑要点 #

• 必须给内部Table指定泛型：如果省略<RecordType>，内部Table会默认用object类型，和外部传入的TableProps<RecordType>类型不兼容。
• 不要重复定义已有属性：比如不要单独在props里定义columns: ColumnsType<RecordType>，直接继承TableProps<RecordType>即可，避免类型冲突。
• 泛型约束要对齐：Antd的Table要求行数据是object类型，所以组件泛型要加extends object约束，避免传入非对象类型。

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