如何解决TypeScript泛型表格组件的类型扩展与IntelliSense提示问题？

问题描述 #

实现泛型表格组件时，希望外部使用该组件时能查看所有可配置的props——已默认设置部分props，同时通过{...rest}支持传入额外自定义props，但当前存在两个问题：

1. IntelliSense无法识别可添加的自定义props
2. 出现类型错误：

An interface can only extend an object type or intersection of object types with statically known members.

错误出现在以下接口定义中：

interface DataTableProps<T, TRecords> extends MantineDataTableProps<T> {
  records: TRecords[];
  columns: DataTableColumn<TRecords>[];
  isLoading?: boolean;
}

解决方案 #

问题根源是MantineDataTableProps<T>可能包含动态成员或索引签名，接口无法直接扩展这类类型。改用类型别名（type）+ 交叉类型替代接口继承即可解决：

1. 重构Props类型定义 #

将接口改为类型别名，通过交叉类型&合并自定义属性与Mantine表格的props类型：

type DataTableProps<T, TRecords> = MantineDataTableProps<T> & {
  records: TRecords[];
  columns: DataTableColumn<TRecords>[];
  isLoading?: boolean;
};

2. 组件参数适配 #

在组件函数中使用重构后的类型，确保rest参数能被IntelliSense正确识别：

export function DataTable<T, TRecords>({
  isLoading,
  records,
  columns,
  ...rest
}: DataTableProps<T, TRecords>) {
  return (
    <MantineDataTable
      withTableBorder
      withColumnBorders
      highlightOnHover
      loaderType="oval"
      loaderSize="sm"
      loaderBackgroundBlur={1}
      fetching={isLoading}
      records={records}
      rowStyle={() => (theme) => ({
        fontSize: !mediumScreen ? theme.fontSizes.sm : theme.fontSizes.xs,
      })}
      columns={columns}
      {...rest}
    />
  );
}

原理说明 #

接口继承要求被继承的类型是静态已知的对象类型，而交叉类型（&）可以灵活组合任意类型，包括带有动态成员的类型。这样既保留了MantineDataTableProps的所有原生props类型，又添加了自定义属性，同时IntelliSense能完整识别所有可配置的props。

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