Discriminated union state machines in Typescript - Mini Project: Build & Apply

Discriminated Union State Machines

📖 Scenario: You are building a simple traffic light controller that changes states based on events. Each state has a unique name and specific data. Using discriminated unions helps manage these states clearly and safely.

🎯 Goal: Create a TypeScript program that defines a discriminated union type for traffic light states, writes a function to transition between states, and prints the current state.

📋 What You'll Learn

Define a discriminated union type called TrafficLightState with three states: red, yellow, and green.

Each state should have a type property with a string literal matching the state name.

Add a duration property (number) to each state representing how long the light stays in that state.

Create a variable called currentState of type TrafficLightState and initialize it to the red state with duration 30.

Write a function called nextState that takes a TrafficLightState and returns the next state in the cycle: red -> green -> yellow -> red.

Use a switch statement on the type property inside nextState to determine the next state.

Print the type and duration of the currentState after transitioning through all states once.

💡 Why This Matters

🌍 Real World

State machines are used in user interfaces, games, and hardware controllers to manage different modes or statuses clearly and safely.

💼 Career

Understanding discriminated unions and state machines is valuable for frontend and backend developers to write robust and maintainable code that handles complex state logic.

1

Define the discriminated union type and initial state

Define a discriminated union type called TrafficLightState with three states: { type: 'red', duration: number }, { type: 'yellow', duration: number }, and { type: 'green', duration: number }. Then create a variable called currentState of type TrafficLightState and set it to the red state with duration 30.

Typescript

// Define TrafficLightState type and currentState variable
// Your code here

Need a hint?

Use a union of object types with a type property as a string literal and a duration number property.

2

Create the nextState function

Write a function called nextState that takes a parameter state of type TrafficLightState and returns a TrafficLightState. Use a switch statement on state.type to return the next state in the cycle: red goes to green with duration 60, green goes to yellow with duration 5, and yellow goes to red with duration 30.

Typescript

type TrafficLightState =
  | { type: 'red'; duration: number }
  | { type: 'yellow'; duration: number }
  | { type: 'green'; duration: number };

let currentState: TrafficLightState = { type: 'red', duration: 30 };

// Write the nextState function below
// Your code here

Need a hint?

Use a switch on state.type and return the next state object with the correct type and duration.

3

Transition through all states once

Use the nextState function to update currentState three times, so it cycles through green, yellow, and back to red. Write three lines that assign currentState to the result of calling nextState(currentState).

Typescript

type TrafficLightState =
  | { type: 'red'; duration: number }
  | { type: 'yellow'; duration: number }
  | { type: 'green'; duration: number };

let currentState: TrafficLightState = { type: 'red', duration: 30 };

function nextState(state: TrafficLightState): TrafficLightState {
  switch (state.type) {
    case 'red':
      return { type: 'green', duration: 60 };
    case 'green':
      return { type: 'yellow', duration: 5 };
    case 'yellow':
      return { type: 'red', duration: 30 };
  }
}

// Update currentState three times using nextState
// Your code here

Need a hint?

Call nextState(currentState) and assign it back to currentState three times.

4

Print the final state

Write a console.log statement that prints the text: Current state: TYPE, duration: DURATION where TYPE and DURATION come from the currentState properties. Use a template string with currentState.type and currentState.duration.

Typescript

type TrafficLightState =
  | { type: 'red'; duration: number }
  | { type: 'yellow'; duration: number }
  | { type: 'green'; duration: number };

let currentState: TrafficLightState = { type: 'red', duration: 30 };

function nextState(state: TrafficLightState): TrafficLightState {
  switch (state.type) {
    case 'red':
      return { type: 'green', duration: 60 };
    case 'green':
      return { type: 'yellow', duration: 5 };
    case 'yellow':
      return { type: 'red', duration: 30 };
  }
}

currentState = nextState(currentState);
currentState = nextState(currentState);
currentState = nextState(currentState);

// Print the current state and duration
// Your code here

Need a hint?

Use console.log with a template string to show the type and duration of currentState.