Typescript code explainers

typescript

import { Routes } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { REPORT_API_URL } from './reports/report.tokens';

Route-scoped providers and lazy loading in Angular

routing dependency-injection lazy-loading

Intermediate 8 steps

typescript

import { Component } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,

Cross-field password validation in Angular

reactive-forms custom-validators cross-field-validation

Intermediate 7 steps

typescript

import { Component, inject } from '@angular/core';
import { combineLatest, map, startWith } from 'rxjs';
import { UserStore } from './user.store';
import { CartStore } from './cart.store';

The view model pattern in Angular

rxjs view-model reactive-streams

Intermediate 6 steps

typescript

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

Building an API-key auth strategy in NestJS

authentication passport dependency-injection

Intermediate 8 steps

typescript

import { Type, applyDecorators } from '@nestjs/common';
import {
  ApiExtraModels,
  ApiOkResponse,

A reusable paginated Swagger decorator in NestJS

decorators generics openapi

Intermediate 6 steps

typescript

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { finalize } from 'rxjs';

A reactive signup form in Angular

reactive-forms validation dependency-injection

Intermediate 10 steps

typescript

import { Directive, ElementRef, EventEmitter, inject, NgZone, OnDestroy, Output } from '@angular/core';
 
@Directive({
  selector: '[appResizeDebounced]',

A debounced resize directive in Angular

debounce change-detection host-bindings

Advanced 7 steps

typescript

import { Directive, ElementRef, HostListener, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';

Building a tooltip directive in Angular

directives cdk-overlay hover-interaction

Intermediate 7 steps

typescript

import { Component, computed, input, model, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
interface Product {

Reactive filtering with Angular signals

signals computed two-way-binding

Intermediate 9 steps

typescript

type QueryValue = string | number | boolean | null | undefined;
type QueryInput = QueryValue | QueryValue[] | { [key: string]: QueryInput };
 
function buildQueryString(params: Record<string, QueryInput>): string {

Building nested query strings recursively

recursion url-encoding serialization

Intermediate 8 steps

typescript

type RGB = { r: number; g: number; b: number };
 
function parseHex(hex: string): RGB {
  const normalized = hex.replace(/^#/, "").trim();

Lightening and darkening hex colors in TypeScript

bitwise color-manipulation parsing

Intermediate 9 steps

typescript

interface RunningStats {
  count: number;
  total: number;
  average: number;

Streaming running averages in TypeScript

generators streaming incremental-aggregation

Intermediate 6 steps

typescript

import {
  IsEmail,
  IsNotEmpty,
  IsOptional,

How validation groups reuse one DTO in NestJS

validation dto decorators

Intermediate 9 steps

typescript

import { InjectionToken, inject, Provider, isDevMode } from '@angular/core';
import { WINDOW } from './window.token';
 
export interface AnalyticsConfig {

Layered config with an Angular InjectionToken

dependency-injection configuration factory-provider

Intermediate 8 steps

typescript

import { useCallback, useRef, useState } from "react";
 
type UploadZoneProps = {
  accept?: string[];

A drag-and-drop file upload zone in React

drag-and-drop file-validation controlled-state

Intermediate 9 steps

typescript

import { useState, useEffect, useRef, useCallback } from "react";
 
interface Suggestion {
  id: string;

A debounced autocomplete hook in React

debounce custom-hooks abortcontroller

Advanced 7 steps

typescript

import { Body, Controller, Ip, Post, UnauthorizedException } from '@nestjs/common';
import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
import { UseGuards } from '@nestjs/common';
import { AuthService } from './auth.service';

Rate-limiting an auth flow in NestJS

rate-limiting authentication guards

Intermediate 8 steps

typescript

import { Component, computed, DestroyRef, inject, input, output, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, map, takeWhile } from 'rxjs';

How a signal-driven countdown works in Angular

signals reactivity rxjs

Intermediate 8 steps