typescript
38 lines · 8 steps
A type-safe order state machine in TypeScript
A const object plus a derived union type model order statuses and enforce legal transitions at compile and runtime.
Explained by
highlit
1export const OrderStatus = {
2 Pending: 'pending',
3 Paid: 'paid',
4 Shipped: 'shipped',
5 Delivered: 'delivered',
6 Cancelled: 'cancelled',
7} as const;
8
9export type OrderStatus = (typeof OrderStatus)[keyof typeof OrderStatus];
10
11const TERMINAL: ReadonlySet<OrderStatus> = new Set([
12 OrderStatus.Delivered,
13 OrderStatus.Cancelled,
14]);
15
16const TRANSITIONS: Record<OrderStatus, readonly OrderStatus[]> = {
17 [OrderStatus.Pending]: [OrderStatus.Paid, OrderStatus.Cancelled],
18 [OrderStatus.Paid]: [OrderStatus.Shipped, OrderStatus.Cancelled],
19 [OrderStatus.Shipped]: [OrderStatus.Delivered],
20 [OrderStatus.Delivered]: [],
21 [OrderStatus.Cancelled]: [],
22};
23
24export function isOrderStatus(value: unknown): value is OrderStatus {
25 return typeof value === 'string' && (Object.values(OrderStatus) as string[]).includes(value);
26}
27
28export function isTerminal(status: OrderStatus): boolean {
29 return TERMINAL.has(status);
30}
31
32export function canTransition(from: OrderStatus, to: OrderStatus): boolean {
33 return TRANSITIONS[from].includes(to);
34}
35
36export function nextStatuses(from: OrderStatus): readonly OrderStatus[] {
37 return TRANSITIONS[from];
38}
01 / 01
STEP 01
‹ swipe to step through ›
Walkthrough
Space play
←→ step
click any line
Three takeaways
- 1A const object with a derived union type gives you enum-like values plus real string literals for free.
- 2Encoding legal transitions in a typed Record makes the state machine's rules the single source of truth.
- 3A type guard bridges untrusted input into the typed world so the rest of the code can trust the status.
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
rust
use serde::Deserialize; #[derive(Debug, Deserialize)] #[serde(untagged)]
Parsing flexible JSON shapes with serde
deserialization
enums
json
Intermediate
6 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
Share this explainer
Here's the card — post it anywhere.
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code
Embed this explainer
Drop the interactive walkthrough into a blog or docs. Views never cost a credit.
<iframe src="https://highlit.co/explainers/a-type-safe-order-state-machine-in-typescript-explained-typescript-f3d3/embed?autoplay=1" width="100%" height="520" loading="lazy" style="border:0"></iframe>
Autoplay is on by default — add ?autoplay=0 to start paused.