Как реализовать типизированную постраничную навигацию с помощью generics?

Пагинация — это повторяющаяся структура: список элементов, номер страницы, размер, общее количество. Если описывать её отдельно для каждого типа данных, получится дублирование и потеря типобезопасности. Generics решают это: один обобщённый тип описывает форму ответа, а конкретный тип подставляется при использовании.

Базовый обобщённый тип

Опишем интерфейс страницы, где T — тип элемента. Все поля, кроме items, не зависят от данных.

interface Page<T> {
  items: T[];
  page: number;
  pageSize: number;
  total: number;
}

interface User { id: number; name: string; }

const users: Page<User> = {
  items: [{ id: 1, name: 'Ann' }],
  page: 1, pageSize: 20, total: 1
};

Обобщённые функции и запросы

Функция загрузки страницы тоже может быть обобщённой. Тип T выводится из аргумента или задаётся явно.

async function fetchPage<T>(url: string): Promise<Page<T>> {
  const res = await fetch(url);
  return res.json() as Promise<Page<T>>;
}

const page = await fetchPage<User>('/api/users?page=1');
page.items[0].name; // типобезопасно

Ограничения и переиспользование

Если нужны общие поля у элементов, используй constraints: <T extends { id: number }>. Это позволяет писать обобщённые компоненты таблиц, списков и хуков пагинации, не теряя типы.

Итог: generics стоит применять везде, где структура одинакова, а тип данных меняется — пагинация, ответы API, коллекции, кэш. Это уменьшает дублирование и повышает надёжность кода.