typescript 27 lines · 7 steps

Human-readable relative times with Intl

Convert a timestamp into phrases like "3 days ago" by walking through escalating time units.

Explained by highlit
Intermediate internationalization date-formatting lookup-table iteration
1const DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
2 { amount: 60, unit: "seconds" },
3 { amount: 60, unit: "minutes" },
4 { amount: 24, unit: "hours" },
5 { amount: 7, unit: "days" },
6 { amount: 4.34524, unit: "weeks" },
7 { amount: 12, unit: "months" },
8 { amount: Number.POSITIVE_INFINITY, unit: "years" },
9];
10 
11export function formatRelativeTime(
12 date: Date | number | string,
13 locale = "en-US",
14): string {
15 const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
16 const target = date instanceof Date ? date : new Date(date);
17 let duration = (target.getTime() - Date.now()) / 1000;
18 
19 for (const { amount, unit } of DIVISIONS) {
20 if (Math.abs(duration) < amount) {
21 return formatter.format(Math.round(duration), unit);
22 }
23 duration /= amount;
24 }
25 
26 return formatter.format(Math.round(duration), "years");
27}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1A table of unit thresholds turns repetitive time math into a single clean loop.
  2. 2Intl.RelativeTimeFormat handles localization and natural phrasing so you never hardcode strings.
  3. 3Dividing the running duration by each unit's size lets one pass scale from seconds up to years.

Related explainers

typescript 
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { ValidationPipe } from '@nestjs/common';
import { ApiProperty } from '@nestjs/swagger';

Wiring validation and Swagger docs in NestJS

validation openapi decorators
Intermediate 8 steps
typescript 
import { Component, Input } from '@angular/core';
 
interface Order {
  id: string;

How Angular ICU plurals localize an order summary

i18n pluralization standalone-component
Intermediate 8 steps
typescript 
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable, catchError, concatMap, finalize } from 'rxjs';
import { DataSource, QueryRunner } from 'typeorm';
 

Wrapping requests in a transaction with NestJS

interceptors transactions rxjs
Advanced 7 steps
typescript 
type CsvColumn<T> = {
  header: string;
  value: (row: T) => string | number | boolean | null | undefined;
};

Building a type-safe CSV writer in TypeScript

generics serialization escaping
Intermediate 7 steps
typescript 
import { parsePhoneNumberFromString, CountryCode } from 'libphonenumber-js';
 
export interface NormalizedPhone {
  e164: string;

Normalizing phone numbers to E.164 in TypeScript

validation normalization error-handling
Intermediate 7 steps
typescript 
import {
  CanActivate,
  ExecutionContext,
  Injectable,

Role-based access with a NestJS guard

authorization guards decorators
Intermediate 6 steps

Share this explainer

Here's the card — post it anywhere.

Human-readable relative times with Intl — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code