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