Code Explainers

Typescript code explainers

typescript
import { Injectable, signal, computed } from '@angular/core';
import {
  HttpInterceptorFn,
  HttpContextToken,

Tracking HTTP loading state in Angular

signals http-interceptor reference-counting
Intermediate 8 steps
typescript
type Event = Record<string, unknown>;
 
interface BatcherOptions {
  endpoint: string;

Batching analytics events in TypeScript

batching buffering async
Intermediate 8 steps
typescript
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route, Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { Observable, of, timer } from 'rxjs';

A custom preloading strategy in Angular

lazy-loading preloading rxjs
Intermediate 7 steps
typescript
import { Processor, WorkerHost, OnWorkerEvent } from '@nestjs/bullmq';
import { Logger } from '@nestjs/common';
import { Job } from 'bullmq';
import { MailerService } from '../mailer/mailer.service';

Processing background email jobs in NestJS

job-queue background-processing dependency-injection
Intermediate 7 steps
typescript
import { Component, computed, inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
 

Building a signup stepper in Angular

signals reactive-forms form-validation
Intermediate 10 steps
typescript
type Change =
  | { kind: "added"; path: string; value: unknown }
  | { kind: "removed"; path: string; value: unknown }
  | { kind: "updated"; path: string; from: unknown; to: unknown };

Building a recursive deep-diff in TypeScript

recursion discriminated-unions type-guards
Intermediate 9 steps
typescript
import { DynamicModule, Module, Provider } from '@nestjs/common';
import Redis, { RedisOptions } from 'ioredis';
 
export const REDIS_CLIENT = Symbol('REDIS_CLIENT');

Building a dynamic Redis module in NestJS

dependency-injection dynamic-modules provider-tokens
Intermediate 8 steps
typescript
type Operator = "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE";
 
type Row = Record<string, unknown>;
 

A type-safe SQL query builder in TypeScript

builder pattern generics method chaining
Intermediate 8 steps
typescript
import { Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 
@Directive({
  selector: '[appTrapFocus]',

Building a focus-trap directive in Angular

accessibility focus-management dom
Intermediate 9 steps
typescript
type AsyncFn<A extends unknown[], R> = (...args: A) => Promise<R>;
 
interface MemoizeOptions<A extends unknown[]> {
  keyFn?: (...args: A) => string;

Memoizing async functions with TTL in TypeScript

memoization generics promises
Advanced 8 steps
typescript
import { Injectable, Scope, Inject } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
 

Request-scoped context service in NestJS

dependency-injection request-scope immutability
Intermediate 8 steps
typescript
interface PollOptions<T> {
  intervalMs?: number;
  timeoutMs?: number;
  signal?: AbortSignal;

A cancellable polling helper in TypeScript

polling async-await abortsignal
Intermediate 9 steps
typescript
type Ok<T> = { ok: true; value: T };
type Err<E> = { ok: false; error: E };
export type Result<T, E> = Ok<T> | Err<E>;
 

A Result type for typed error handling

discriminated-union error-handling type-guards
Intermediate 8 steps
typescript
import {
  ArgumentsHost,
  Catch,
  ExceptionFilter,

A catch-all exception filter in NestJS

error-handling exception-filter http
Intermediate 8 steps
typescript
import { Module, Injectable } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import * as Joi from 'joi';
 

Validated, typed config in NestJS

configuration validation dependency-injection
Intermediate 6 steps
typescript
type User = {
  id: number;
  email: string;
  roles: string[];

Validating API data with TypeScript type guards

type-guards runtime-validation type-narrowing
Intermediate 8 steps
typescript
import {
  createParamDecorator,
  ExecutionContext,
  UnauthorizedException,

Building a @CurrentUser decorator in NestJS

decorators authentication request-context
Intermediate 6 steps
typescript
import { inject } from '@angular/core';
import {
  CanActivateFn,
  Router,

Functional route guards in Angular

route-guards dependency-injection observables
Intermediate 5 steps