Code Explainers

Typescript code 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
typescript
import { Injectable, computed, effect, signal } from '@angular/core';
 
export interface CartLine {
  id: string;

A signal-based cart store in Angular

signals reactivity computed-state
Intermediate 8 steps
typescript
import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RevenueChartComponent } from './revenue-chart.component';
import { ReportService, RevenueReport } from './report.service';

Deferred chart loading with @defer in Angular

lazy-loading signals dependency-injection
Intermediate 8 steps
typescript
export const OrderStatus = {
  Pending: 'pending',
  Paid: 'paid',
  Shipped: 'shipped',

A type-safe order state machine in TypeScript

state-machine union-types type-guards
Intermediate 8 steps
typescript
export async function copyToClipboard(text: string): Promise<boolean> {
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text);

Clipboard copy with a legacy fallback

clipboard feature-detection graceful-degradation
Intermediate 7 steps
typescript
import { Exclude, Expose, Transform, Type } from 'class-transformer';
 
export class AddressEntity {
  street: string;

Shaping API responses with class-transformer in NestJS

serialization decorators dto
Intermediate 10 steps
typescript
import { Injectable, inject } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of, Subject } from 'rxjs';
import { filter, switchMap, take } from 'rxjs/operators';

A hover-triggered preloading strategy in Angular

lazy-loading rxjs preloading
Advanced 8 steps
typescript
import { Injectable, inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

A reusable confirmation dialog service in Angular

dependency-injection observables dialog
Intermediate 6 steps
typescript
import { Directive, ElementRef, HostBinding, HostListener, Input, inject, signal } from '@angular/core';
 
@Directive({
  selector: '[appCopyToClipboard]',

A copy-to-clipboard directive in Angular

directives host bindings clipboard api
Intermediate 9 steps
typescript
import slugify from "slugify";
 
interface SlugRepository {
  exists(slug: string): Promise<boolean>;

Generating unique URL slugs from titles

slugs normalization uniqueness
Intermediate 6 steps
typescript
import { Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { createClient, RedisClientType } from 'redis';
 

Provide a Redis client with a NestJS factory

dependency-injection async-factory redis
Intermediate 6 steps
typescript
type RGB = { r: number; g: number; b: number };
 
type WCAGLevel = "AA" | "AAA";
type TextSize = "normal" | "large";

Checking WCAG color contrast in TypeScript

accessibility color-math type-safety
Intermediate 10 steps
typescript
import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
 
interface MoneyOptions {
  currency?: string;

Building a cached money pipe in Angular

pipes memoization internationalization
Intermediate 8 steps