Typescript code explainers

typescript

import { Injectable, OnModuleInit, Logger } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { Cron, CronExpression } from '@nestjs/schedule';

A self-refreshing feature flags provider in NestJS

caching scheduled-tasks dependency-injection

Intermediate 8 steps

typescript

import { Test, TestingModule } from '@nestjs/testing';
import { getRepositoryToken } from '@nestjs/typeorm';
import { Repository } from 'typeorm';

Unit testing a NestJS service with mocked providers

dependency injection mocking unit testing

Intermediate 7 steps

typescript

import {
  WebSocketGateway,
  WebSocketServer,
  SubscribeMessage,

Building a real-time chat gateway in NestJS

websockets real-time socket.io

Intermediate 8 steps

typescript

type CsvRecord = Record<string, string>;
 
function parseCsv(input: string): CsvRecord[] {
  const rows: string[][] = [];

Parsing CSV with a character state machine

state-machine parsing string-processing

Intermediate 8 steps

typescript

const ISO_DURATION = /^P(?:(\d+(?:\.\d+)?)Y)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)W)?(?:(\d+(?:\.\d+)?)D)?(?:T(?:(\d+(?:\.\d+)?)H)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)S)?)?$/;
 
const SECONDS_PER = {
  years: 365 * 24 * 60 * 60,

Parsing ISO 8601 durations to seconds

regex parsing iso-8601

Intermediate 7 steps

typescript

import { Injectable } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

Guarding navigation with CanDeactivate in Angular

route-guards functional-guards dependency-injection

Intermediate 7 steps

typescript

function* map<T, U>(source: Iterable<T>, fn: (value: T, index: number) => U): Generator<U> {
  let index = 0;
  for (const value of source) {
    yield fn(value, index++);

Building a lazy iterator pipeline in TypeScript

generators lazy-evaluation iterators

Intermediate 7 steps

typescript

export class Semaphore {
  private available: number;
  private readonly waiters: Array<() => void> = [];

Building an async Semaphore in TypeScript

concurrency async-await promises

Advanced 6 steps

typescript

import { IsInt, IsOptional, Max, Min } from 'class-validator';
import { Type } from 'class-transformer';
 
export class PaginationQueryDto {

Type-safe pagination queries in NestJS

pagination validation dto

Intermediate 7 steps

typescript

import {
  Injectable,
  NestInterceptor,
  ExecutionContext,

A per-route timeout interceptor in NestJS

interceptors metadata reflection rxjs

Intermediate 8 steps

typescript

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import {
  Observable,

A city autocomplete service in Angular

rxjs observables debouncing

Intermediate 7 steps

typescript

import { Controller, Get, Param, Post, Body, Version, VERSION_NEUTRAL } from '@nestjs/common';
import { UsersService } from './users.service';
import { CreateUserDto } from './dto/create-user.dto';

How API versioning works in NestJS

api-versioning routing dependency-injection

Intermediate 9 steps

typescript

import { HttpService } from '@nestjs/axios';
import { Injectable, Logger, ServiceUnavailableException } from '@nestjs/common';
import { AxiosError } from 'axios';
import { catchError, firstValueFrom, retry, timer } from 'rxjs';

Resilient payment retries in NestJS

retry exponential-backoff rxjs

Advanced 8 steps

typescript

interface PaginationParams {
  totalItems: number;
  pageSize: number;
  currentPage: number;

Building safe pagination metadata in TypeScript

pagination input-validation pure-functions

Intermediate 7 steps

typescript

type Task<T> = () => Promise<T>;
 
export class Mutex {
  private queue: Array<() => void> = [];

Building an async mutex in TypeScript

concurrency promises locking

Advanced 7 steps

typescript

import { useEffect, useRef, useState } from "react";
 
export function useClickOutside<T extends HTMLElement>() {
  const ref = useRef<T>(null);

A dismiss-on-outside-click hook in React

custom-hooks event-listeners cleanup

Intermediate 7 steps

typescript

import { Injectable, NotFoundException } from '@nestjs/common';
import { EventEmitter2, OnEvent } from '@nestjs/event-emitter';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';

Decoupling side effects with NestJS events

event-driven decoupling dependency-injection

Intermediate 7 steps

typescript

import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder } from '@angular/forms';
import { debounceTime, map } from 'rxjs/operators';

Syncing an Angular filter form with the URL

reactive-forms query-params rxjs

Intermediate 8 steps