React TypeScript中如何为通用工具函数定义通用行类型

要让分页工具支持任意行结构，核心是用TypeScript泛型实现类型复用与适配——分页逻辑仅对数组做切片操作，无需关心行的具体属性结构。

改造方案：泛型化接口与函数 #

方式1：定义泛型接口 #

将原接口改为泛型结构，让rows的类型可动态传入：

// 泛型接口，T代表任意行类型
interface IPaginationParams<T> {
  rowsPerPage: number;
  rows: T[]; // T可替换为任意自定义行类型
  page: number;
}

export const updatedRows = <T>(args: IPaginationParams<T>): T[] => {
  return args.rowsPerPage > 0
    ? args.rows.slice(args.page * args.rowsPerPage, args.page * args.rowsPerPage + args.rowsPerPage)
    : args.rows;
};

方式2：函数直接声明泛型（更简洁） #

若无需单独接口，可直接在函数参数中使用泛型：

export const updatedRows = <T>(args: {
  rowsPerPage: number;
  rows: T[];
  page: number;
}): T[] => {
  return args.rowsPerPage > 0
    ? args.rows.slice(args.page * args.rowsPerPage, args.page * args.rowsPerPage + args.rowsPerPage)
    : args.rows;
};

组件中的实际使用 #

针对你提到的两种行结构，先定义对应类型，再传入函数即可：

第一种行类型的使用 #

// 定义第一种行的类型
type FirstRowType = {
  id: number;
  name: string;
  description: string;
  role: string;
  manager: string;
  total_tasks: number;
  annotator: number;
  qc: number;
};

// 调用时传入类型参数
const paginatedFirstRows = updatedRows<FirstRowType>({
  rowsPerPage: 10,
  page: 0,
  rows: [/* 符合FirstRowType的数组数据 */]
});

第二种行类型的使用 #

// 定义第二种行的类型
type SecondRowType = {
  id: number;
  name: string;
  code: string;
  type: string;
  added_by: string;
  added_on: string;
};

// 调用时传入类型参数
const paginatedSecondRows = updatedRows<SecondRowType>({
  rowsPerPage: 10,
  page: 0,
  rows: [/* 符合SecondRowType的数组数据 */]
});

额外优化：约束行的共同属性 #

如果所有行必须包含id、name这类共同属性，可给泛型添加约束，保证类型安全：

// 定义基础行类型作为约束
interface BaseRow {
  id: number;
  name: string;
}

// 泛型T必须继承BaseRow
export const updatedRows = <T extends BaseRow>(args: {
  rowsPerPage: number;
  rows: T[];
  page: number;
}): T[] => {
  return args.rowsPerPage > 0
    ? args.rows.slice(args.page * args.rowsPerPage, args.page * args.rowsPerPage + args.rowsPerPage)
    : args.rows;
};

此时若传入的行类型缺少id或name，TypeScript会直接报错。

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