typescript 18 lines · 4 steps

Formatting milliseconds as a clock string

A small TypeScript helper turns a millisecond count into a readable MM:SS or H:MM:SS timestamp.

Explained by highlit

Beginner formatting integer-math guard-clause string-padding

1export function formatDuration(ms: number): string {
2  if (!Number.isFinite(ms) || ms < 0) {
3    return "00:00";
4  }
5 
6  const totalSeconds = Math.floor(ms / 1000);
7  const hours = Math.floor(totalSeconds / 3600);
8  const minutes = Math.floor((totalSeconds % 3600) / 60);
9  const seconds = totalSeconds % 60;
10 
11  const pad = (value: number): string => value.toString().padStart(2, "0");
12 
13  if (hours > 0) {
14    return `${hours}:${pad(minutes)}:${pad(seconds)}`;
15  }
16 
17  return `${pad(minutes)}:${pad(seconds)}`;
18}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Validate numeric input up front so bad values return a safe default instead of NaN in the output.
2Modulo and integer division cleanly decompose a total into hours, minutes, and seconds.
3A tiny local helper like pad keeps the formatting logic in one place and readable.

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';