Code Explainers

Typescript code explainers

typescript 
interface JwtPayload {
  exp?: number;
  iat?: number;
  sub?: string;

Decoding a JWT to check expiry

jwt base64url type-guards
Intermediate 8 steps
typescript 
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 
interface Shortcut {
  key: string;

A keyboard shortcut directive in Angular

directives event-handling keyboard-shortcuts
Intermediate 9 steps
typescript 
import { Component, computed, signal } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkScrollableModule } from '@angular/cdk/scrolling';
 

Paginating a CDK table with Angular signals

signals computed-state pagination
Intermediate 9 steps
typescript 
type Semver = {
  major: number;
  minor: number;
  patch: number;

Parsing and comparing semver strings in TypeScript

parsing regular-expressions comparison
Intermediate 9 steps
typescript 
import { Component } from '@angular/core';
import {
  trigger,
  transition,

Staggered list animations in Angular

animations stagger enter-leave
Intermediate 10 steps
typescript 
type Handler = (event: KeyboardEvent) => void;
 
interface Binding {
  combo: string;

Building a keyboard shortcut manager in TypeScript

event-handling normalization closures
Intermediate 7 steps
typescript 
type MatchSegment = {
  text: string;
  matched: boolean;
};

Splitting text into highlighted match segments

regex string-matching text-highlighting
Intermediate 8 steps
typescript 
import { Component, input, computed } from '@angular/core';
 
function toNumber(value: number | string): number {
  return typeof value === 'number' ? value : parseFloat(value);

Signal inputs and computed in Angular

signals reactivity derived-state
Intermediate 5 steps
typescript 
import sanitizeHtml from "sanitize-html";
 
interface RichTextOptions {
  allowImages?: boolean;

Building a configurable HTML sanitizer allowlist

sanitization xss-prevention allowlist
Intermediate 7 steps
typescript 
import { useCallback, useEffect, useRef, useState } from "react";
 
interface Page<T> {
  items: T[];

A cursor-based infinite scroll hook in React

custom-hooks pagination intersection-observer
Intermediate 9 steps
typescript 
type NestedValue = string | NestedValue[] | { [key: string]: NestedValue };
 
function parseFieldPath(name: string): string[] {
  const match = name.match(/^([^\[\]]+)((?:\[[^\[\]]*\])*)$/);

Parsing bracketed form field names into nested objects

parsing recursive-types regex
Intermediate 8 steps
typescript 
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
 
interface SignupModel {

How template-driven forms validate in Angular

forms two-way-binding validation
Intermediate 9 steps
typescript 
import { Injectable, signal, computed } from '@angular/core';
 
export type ToastKind = 'success' | 'error' | 'info' | 'warning';
 

Building a signal-based toast service in Angular

signals state-management dependency-injection
Intermediate 8 steps
typescript 
import { Controller } from '@nestjs/common';
import {
  MessagePattern,
  Payload,

Manual RabbitMQ acks in a NestJS controller

microservices message-queue acknowledgement
Intermediate 8 steps
typescript 
type LazyImageOptions = {
  rootMargin?: string;
  loadedClass?: string;
};

Lazy-loading images with IntersectionObserver

intersectionobserver lazy-loading performance
Intermediate 7 steps
typescript 
type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;
 

Type-safe deep merge in TypeScript

recursion conditional-types mapped-types
Advanced 7 steps
typescript 
type CurrencyFormatOptions = {
  locale?: string;
  currency: string;
  showDecimals?: boolean;

Caching Intl.NumberFormat for currency

memoization internationalization caching
Intermediate 9 steps
typescript 
import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-card',

Multi-slot content projection in Angular

content-projection components templates
Intermediate 7 steps