Typescript code explainers

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

typescript

import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository, DeepPartial } from 'typeorm';
import { User } from './entities/user.entity';

Building a CRUD service in NestJS

crud dependency-injection repository-pattern

Intermediate 7 steps

typescript

type AsyncMethod = (...args: any[]) => Promise<any>;
 
function LogExecutionTime(thresholdMs = 0) {
  return function <T extends AsyncMethod>(

A method decorator that times async calls

decorators higher-order-functions async

Advanced 9 steps

typescript

import { Controller, Get, Param, Query, Redirect, NotFoundException } from '@nestjs/common';
import { LinksService } from './links.service';
 
@Controller('links')

Handling HTTP redirects in NestJS

redirects routing decorators

Intermediate 7 steps

typescript

import {
  CanActivate,
  ExecutionContext,
  Injectable,

How guards chain auth in NestJS

guards authentication authorization

Intermediate 8 steps

typescript

import { useState, useCallback } from 'react';
 
type Todo = {
  id: string;

Optimistic UI updates in a React hook

optimistic-updates custom-hooks error-handling

Intermediate 8 steps

typescript

import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { toObservable } from '@angular/core/rxjs-interop';

Virtual scrolling a contact list in Angular

virtual-scrolling signals change-detection

Intermediate 6 steps

typescript

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { BullModule } from '@nestjs/bullmq';

How a NestJS feature module wires up

dependency-injection modularity orm

Intermediate 7 steps

typescript

import {
  Controller,
  Get,
  Query,

Validating paginated queries in NestJS

pagination validation pipes

Intermediate 7 steps

typescript

import { AsyncLocalStorage } from 'node:async_hooks';
import { randomUUID } from 'node:crypto';
import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

Request correlation IDs in NestJS with AsyncLocalStorage

async-local-storage middleware logging

Advanced 8 steps

typescript

import {
  Controller,
  Post,
  UploadedFile,

Handling avatar uploads in NestJS

file-upload validation interceptors

Intermediate 7 steps

typescript

@Component({
  selector: 'app-article-editor',
  templateUrl: './article-editor.component.html',
})

Autosaving a form with RxJS in Angular

reactive-forms rxjs-operators debouncing

Advanced 8 steps

typescript

type CountdownState = {
  deadline: number;
  onTick: (remaining: number) => void;
  onComplete: () => void;

A countdown timer that survives reloads

persistence timers localstorage

Intermediate 10 steps

typescript

type QueuedRequest = {
  id: string;
  url: string;
  method: string;

A retry queue with exponential backoff

retry exponential-backoff persistence

Intermediate 10 steps

typescript

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { ConfigService } from '@nestjs/config';

How a JWT strategy authenticates in NestJS

authentication jwt passport

Intermediate 7 steps

typescript

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, take, switchMap } from 'rxjs/operators';

Refreshing auth tokens in an Angular interceptor

http-interceptor token-refresh rxjs

Advanced 8 steps