使用TypeScript扩展Primereact DataTable组件Props时遇泛型参数错误

方案1：泛型接口适配多种行数据类型 #

这种方式适合自定义表格组件需要支持不同类型的行数据，保持通用性：

import React from 'react';
import { DataTable, DataTableProps } from 'primereact/datatable';
import { Column } from 'primereact/column';

// 将自定义props接口定义为泛型，接收行数据类型T
interface DtWrapperProps<T> extends DataTableProps<T> {
  onFilteredItems?: (filteredItems: T[]) => void;
}

// 自定义组件同步使用泛型，适配不同类型的行数据
const DtWrapper = <T,>(props: DtWrapperProps<T>) => {
  // 拦截DataTable的onFilter事件，获取过滤后的数据集并传递给自定义回调
  const handleFilter = (event: any) => {
    // 保留原组件的onFilter逻辑
    props.onFilter?.(event);
    // 触发自定义的onFilteredItems回调
    props.onFilteredItems?.(event.filteredValue);
  };

  return <DataTable {...props} onFilter={handleFilter} />;
};

// 使用示例：传入具体的行数据类型
interface User {
  id: number;
  name: string;
  email: string;
}

const App = () => {
  const userList: User[] = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' }
  ];

  return (
    <DtWrapper<User>
      value={userList}
      onFilteredItems={(filteredUsers) => console.log('过滤后的用户:', filteredUsers)}
    >
      <Column field="id" header="ID" />
      <Column field="name" header="姓名" />
      <Column field="email" header="邮箱" />
    </DtWrapper>
  );
};

方案2：指定固定行数据类型 #

如果自定义表格只处理单一类型的行数据，可以直接给DataTableProps传入具体类型，无需泛型：

import React from 'react';
import { DataTable, DataTableProps } from 'primereact/datatable';
import { Column } from 'primereact/column';

// 定义固定的行数据类型
interface Product {
  id: number;
  name: string;
  price: number;
}

// 直接继承带具体类型参数的DataTableProps
interface DtWrapperProps extends DataTableProps<Product> {
  onFilteredItems?: (filteredItems: Product[]) => void;
}

const DtWrapper = (props: DtWrapperProps) => {
  const handleFilter = (event: any) => {
    props.onFilter?.(event);
    props.onFilteredItems?.(event.filteredValue);
  };

  return <DataTable {...props} onFilter={handleFilter} />;
};

报错原因说明 #

DataTableProps是PrimeReact提供的泛型类型，必须传入表格行数据的类型参数才能正确推导props的类型（比如value属性、列字段的类型等）。直接extends DataTableProps会因缺少泛型参数触发类型错误。

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