typescript 45 lines · 7 steps

A typed checkout state machine in TypeScript

A finite state machine models checkout flow with a transition table the type system keeps honest.

Explained by highlit

Intermediate state-machine union-types type-safety transition-table encapsulation

1type CheckoutState = "cart" | "shipping" | "payment" | "review" | "confirmed";
2 
3type CheckoutEvent =
4  | { type: "PROCEED" }
5  | { type: "BACK" }
6  | { type: "CANCEL" };
7 
8const transitions: Record<CheckoutState, Partial<Record<CheckoutEvent["type"], CheckoutState>>> = {
9  cart: { PROCEED: "shipping" },
10  shipping: { PROCEED: "payment", BACK: "cart" },
11  payment: { PROCEED: "review", BACK: "shipping" },
12  review: { PROCEED: "confirmed", BACK: "payment" },
13  confirmed: {},
14};
15 
16export class CheckoutMachine {
17  private state: CheckoutState = "cart";
18 
19  get current(): CheckoutState {
20    return this.state;
21  }
22 
23  can(event: CheckoutEvent["type"]): boolean {
24    return event in transitions[this.state] || event === "CANCEL";
25  }
26 
27  send(event: CheckoutEvent): CheckoutState {
28    if (event.type === "CANCEL") {
29      this.state = "cart";
30      return this.state;
31    }
32 
33    const next = transitions[this.state][event.type];
34    if (!next) {
35      throw new Error(`Invalid transition: ${event.type} from ${this.state}`);
36    }
37 
38    this.state = next;
39    return this.state;
40  }
41 
42  isComplete(): boolean {
43    return this.state === "confirmed";
44  }
45}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Modeling states and events as union types lets the compiler reject impossible combinations before runtime.
2A transition table separates the rules of a workflow from the code that executes them, making both easier to audit.
3Guarding transitions and centralizing state changes keeps invalid states unreachable by construction.

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';