5 Function Types

This chapter advances from basic and algebraic data types to function types, showing how typing functions unlocks more expressive, reusable designs. It explains function signatures (argument and return types), naming function types, and treating functions as first-class values that can be stored, passed, and returned. With this capability, familiar constructs become simpler and safer to express.

Several practical applications follow. The strategy pattern is distilled from interfaces and classes to a single function type plus a few concrete functions, reducing boilerplate while preserving the pattern’s intent. State machines move from enum-and-switch implementations to a pluggable function property that represents the current state’s behavior, with transitions implemented by reassigning that function; an alternative uses sum types to make states and transitions explicit. The chapter also shows how plugging functions into class properties enables easy runtime behavior changes (for example, a configurable greeter).

The chapter then introduces lazy values—deferring expensive work by passing functions (often lambdas) that compute results only when needed—and demonstrates how this keeps code lean and efficient. It builds up higher-order functions, focusing on three foundational data-processing tools: map (transform each item), filter (keep items satisfying a predicate), and reduce (combine items into a single value using an initial seed). It discusses implementation nuances such as reduce’s initial value and order, notes common library equivalents across languages, and connects these ideas to functional programming, showing how typed functions bring FP techniques into TypeScript with minimal ceremony.

Strategy pattern made up of an IStrategy interface, ConcreteStrategy1 and ConcreteStrategy2 implementations, and a Context which uses the algorithms through the IStrategy interface

Strategy pattern made up of a Context which uses a function, either concreteStrategy1() or concreteStrategy2()

Two TypeScript (.ts) files containing code samples which should be inlined in the Markdown document between ```ts and ``` markers. The <!-- … --> comments annotate the code samples for my script.

Text processing state machine with the three states (text processing, marker processing, code processing) and transitions between the states based on input. Text processing is the initial state or start state.

Squaring numbers and getting string lengths are very different scenarios but the overall structure of the transformation is the same: take an input array, apply a function, produce an output array.

Keeping only even numbers and strings with length 5 share a common structure: we traverse the input, apply the filter, and output the items for which the filter returns true.

Common structure of combining the numbers in a number array and strings in a string array. In the first case, the initial value is 1 and the combination we apply is multiplication with each item. In the second case, the initial value is “” and the combination we apply is concatenation with each item.

Combining an array of strings with the operation “first letter of both strings” gives us different results when applied from left to right and when applied from right to left. In the first case we start with empty string and “apple”, then “a” and “orange”, then “ao” and “peach” giving us “ap”. In the second case we start with “peach” and empty string, then “orange” and “p” giving “op”, then “apple” and “op” giving “ao”.

FAQ

type WashingStrategy = (car: Car) => void;

function standardWash(car: Car) { /* ... */ }
function premiumWash(car: Car) { /* ... */ }

class CarWash {
  service(car: Car, premium: boolean) {
    const strategy: WashingStrategy = premium ? premiumWash : standardWash;
    strategy(car);
  }
}

class TextProcessor {
  private result: string[] = [];
  private processLine: (line: string) => void = this.textState;

  private textState(line: string) {
    this.result.push(line);
    if (line.startsWith("<!--")) this.processLine = this.markerState;
  }
  private markerState(line: string) {
    this.result.push(line);
    if (line.startsWith("```ts")) this.processLine = this.codeState;
  }
  private codeState(line: string) {
    if (line.startsWith("```")) {
      this.result.push(line);
      this.processLine = this.textState;
    }
  }
}

function chooseMyRide(bike: Bike, car: () => Car): Bike | Car {
  return isItRaining() ? car() : bike;
}

chooseMyRide(new Bike(), () => new Car()); // Car built only if used

function map<T, U>(items: T[], f: (item: T) => U): U[]

function filter<T>(items: T[], pred: (item: T) => boolean): T[]

function reduce<T>(items: T[], init: T, op: (a: T, b: T) => T): T

map([1,2,3], n => n*n)               // [1,4,9]
filter([1,2,3,4], n => n % 2 === 0)   // [2,4]
reduce([1,2,3,4], 1, (a,b) => a*b)    // 24