求Laravel分页器对应的TypeScript类型与接口定义

当然可以针对Laravel分页器的返回结构定义对应的TypeScript类型或接口，以下是具体实现方案：

1. 匹配Laravel默认分页结构的接口 #

Laravel的LengthAwarePaginator默认返回的结构包含数据列表和分页元信息，你可以根据这个结构定义通用接口：

分页元信息接口 #

interface PaginationMeta {
  current_page: number;
  from: number | null;
  last_page: number;
  links: Array<{
    url: string | null;
    label: string;
    active: boolean;
  }>;
  next_page_url: string | null;
  path: string;
  per_page: number;
  prev_page_url: string | null;
  to: number | null;
  total: number;
}

通用分页响应接口（带泛型） #

这个接口可以适配任意数据类型的分页返回：

interface PaginatedResponse<T> {
  data: T[];
  meta: PaginationMeta;
}

适配根层级元信息的情况

如果你的Laravel分页配置是把元信息直接放在返回根节点（而非meta字段下），调整接口如下：

interface PaginatedResponse<T> {
  data: T[];
  current_page: number;
  from: number | null;
  last_page: number;
  links: Array<{
    url: string | null;
    label: string;
    active: boolean;
  }>;
  next_page_url: string | null;
  path: string;
  per_page: number;
  prev_page_url: string | null;
  to: number | null;
  total: number;
}

2. 实际使用示例 #

假设你有一个User数据类型，用分页接口包裹它：

// 定义业务数据类型
interface User {
  id: number;
  name: string;
  email: string;
}

// 生成分页用户类型
type PaginatedUsers = PaginatedResponse<User>;

// 接口请求示例
async function fetchPaginatedUsers(): Promise<PaginatedUsers> {
  const res = await fetch('/api/users?page=1');
  return res.json();
}

3. 自定义调整 #

如果你的Laravel项目修改了分页返回的字段（比如重命名per_page为page_size），只需对应修改接口里的字段名称即可。建议把这些分页接口抽成单独的类型文件（如src/types/pagination.ts），方便项目全局复用。

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