typescript 41 lines · 8 steps

Modeling request state with discriminated unions

A discriminated union makes each request phase carry exactly the data it needs, and the compiler enforces every case.

Explained by highlit

Intermediate discriminated-unions exhaustiveness-checking state-machine type-narrowing generics

1type RequestState<T, E = string> =
| { status: "idle" }
| { status: "loading" }
| { status: "success"; data: T; fetchedAt: number }
| { status: "error"; error: E; retryable: boolean };
6 
7function reducer<T>(
state: RequestState<T>,
action:
  | { type: "fetch" }
  | { type: "resolve"; data: T }
  | { type: "reject"; error: string; retryable: boolean }
13): RequestState<T> {
switch (action.type) {
  case "fetch":
    return { status: "loading" };
  case "resolve":
    return { status: "success", data: action.data, fetchedAt: Date.now() };
  case "reject":
    return { status: "error", error: action.error, retryable: action.retryable };
}
22}
23 
24function render<T>(state: RequestState<T>, view: (data: T) => string): string {
switch (state.status) {
  case "idle":
    return "Nothing loaded yet";
  case "loading":
    return "Loading\u2026";
  case "success":
    return view(state.data);
  case "error":
    return state.retryable
      ? `${state.error} \u2014 tap to retry`
      : `Failed: ${state.error}`;
  default: {
    const _exhaustive: never = state;
    return _exhaustive;
  }
}
41}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Discriminated unions let each state own only the fields that make sense for it, so impossible combinations become unrepresentable.
2Switching on the shared discriminant field narrows the type, giving you safe access to phase-specific data without casts.
3Assigning the remaining case to `never` turns a forgotten branch into a compile error, keeping switches in sync with the union.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';