Typescript code explainers

typescript

import {
  createParamDecorator,
  ExecutionContext,
  UnauthorizedException,

A signed-cookie param decorator in NestJS

custom-decorators hmac timing-safe-comparison

Advanced 8 steps

typescript

type CompactOptions = {
  locale?: string;
  maximumFractionDigits?: number;
};

Caching Intl.NumberFormat for compact numbers

memoization internationalization caching

Intermediate 7 steps

typescript

import {
  CallHandler,
  ExecutionContext,
  Injectable,

Deduping in-flight requests in NestJS

interceptor request-deduplication rxjs

Advanced 6 steps

typescript

import {
  Component,
  ContentChildren,
  QueryList,

Building a content-projected wizard in Angular

content-projection templateref querylist

Advanced 9 steps

typescript

import { Directive, ElementRef, HostListener, Renderer2, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@Directive({

Building a phone-mask ControlValueAccessor in Angular

directives control-value-accessor input-masking

Intermediate 8 steps

typescript

interface ParsedCookie {
  name: string;
  value: string;
  domain?: string;

Parsing a Set-Cookie header in TypeScript

parsing string-manipulation type-safety

Intermediate 9 steps

typescript

export function formatDuration(ms: number): string {
  if (!Number.isFinite(ms) || ms < 0) {
    return "00:00";
  }

Formatting milliseconds as a clock string

formatting integer-math guard-clause

Beginner 4 steps

typescript

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductRecommendationsComponent } from './product-recommendations.component';

Deferred loading with @defer in Angular

lazy-loading signals standalone-components

Intermediate 8 steps

typescript

import {
  Controller,
  Get,
  Param,

HTTP conditional caching in a NestJS controller

http-caching etag conditional-requests

Intermediate 7 steps

typescript

type RetryableRequest<T> = () => Promise<T>;
 
interface RetryOptions {
  maxAttempts?: number;

Retrying HTTP requests with backoff

retry exponential-backoff error-handling

Intermediate 8 steps

typescript

import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
 
interface Point {
  x: number;

Throttling pointer events with NgZone in Angular

change-detection requestanimationframe event-throttling

Advanced 8 steps

typescript

import {
  MiddlewareConsumer,
  Module,
  NestModule,

How middleware binds to routes in NestJS

middleware routing modules

Intermediate 6 steps

typescript

interface Reading {
  timestamp: number;
  value: number;
}

A weighted moving average in TypeScript

moving-average sliding-window smoothing

Intermediate 6 steps

typescript

export interface FormatBytesOptions {
  decimals?: number;
  binary?: boolean;
}

Formatting byte counts into human-readable sizes

formatting logarithms default-parameters

Intermediate 8 steps

typescript

import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  DetachedRouteHandle,

A scroll-preserving RouteReuseStrategy in Angular

route-reuse scroll-restoration caching

Advanced 10 steps

typescript

import {
  Directive,
  ElementRef,
  EventEmitter,

An infinite-scroll directive in Angular

intersectionobserver directives performance

Advanced 7 steps

typescript

type Bucket = { start: number; count: number };
 
export class SlidingWindowCounter {
  private readonly windowMs: number;

A sliding window rate counter in TypeScript

sliding-window ring-buffer rate-limiting

Intermediate 7 steps

typescript

import {
  Component,
  ComponentRef,
  Injector,

Dynamic component rendering in Angular

dynamic-components viewcontainerref lifecycle-hooks

Advanced 7 steps