typescript 47 lines · 7 steps

Building safe pagination metadata in TypeScript

A pure function turns raw pagination inputs into a fully-derived, bounds-checked metadata object.

Explained by highlit
Intermediate pagination input-validation pure-functions type-safety
1interface PaginationParams {
2 totalItems: number;
3 pageSize: number;
4 currentPage: number;
5}
6 
7interface PaginationMeta {
8 currentPage: number;
9 pageSize: number;
10 totalItems: number;
11 totalPages: number;
12 hasPreviousPage: boolean;
13 hasNextPage: boolean;
14 previousPage: number | null;
15 nextPage: number | null;
16 firstItemIndex: number;
17 lastItemIndex: number;
18}
19 
20export function buildPaginationMeta({
21 totalItems,
22 pageSize,
23 currentPage,
24}: PaginationParams): PaginationMeta {
25 const safePageSize = Math.max(1, Math.floor(pageSize));
26 const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));
27 const page = Math.min(Math.max(1, Math.floor(currentPage)), totalPages);
28 
29 const hasPreviousPage = page > 1;
30 const hasNextPage = page < totalPages;
31 
32 const firstItemIndex = totalItems === 0 ? 0 : (page - 1) * safePageSize + 1;
33 const lastItemIndex = Math.min(page * safePageSize, totalItems);
34 
35 return {
36 currentPage: page,
37 pageSize: safePageSize,
38 totalItems,
39 totalPages,
40 hasPreviousPage,
41 hasNextPage,
42 previousPage: hasPreviousPage ? page - 1 : null,
43 nextPage: hasNextPage ? page + 1 : null,
44 firstItemIndex,
45 lastItemIndex,
46 };
47}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Sanitizing inputs at the top of a function lets the rest of the logic assume clean values.
  2. 2Deriving every output field from a few validated numbers keeps pagination state internally consistent.
  3. 3Explicit interfaces for both input and output make a function's contract self-documenting.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 steps
typescript 
import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';

Per-tenant database connections in NestJS

multi-tenancy connection-pooling dependency-injection
Advanced 8 steps

Share this explainer

Here's the card — post it anywhere.

Building safe pagination metadata in TypeScript — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code