TypeScript Academy · Lesson

Typed pipe and flow Utilities

Build left-to-right pipelines with accurate inference.

Typed pipe and flow Utilities is a free TypeScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

From compose to pipe

pipe threads a value through functions left to right, the reading order most people prefer. pipe(x, f, g) means g(f(x)).

A Two-Step pipe

The simplest pipe takes a value and one function, returning the result. Reading top to bottom matches execution order.

const pipe2 = <A, B>(a: A, f: (a: A) => B): B => f(a);
console.log(pipe2(5, n => n + 1)); // 6

Threading Through Several Functions

A three-argument pipe applies functions in sequence. Each step's output becomes the next step's input.

function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C {
  return g(f(a));
}
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
console.log(pipe(5, inc, dbl)); // 12

Left-to-Right Reading

Unlike compose, pipe lists steps in the order they run. pipe(5, inc, dbl) increments then doubles, exactly as written.

console.log(pipe(5, dbl, inc)); // 11 (double then inc)

Why Overloads Are Needed

Different call sites pass different numbers of functions. To type each arity precisely, pipe uses overload signatures, one per supported length.

function pipe<A, B>(a: A, f: (a: A) => B): B;
function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C;
function pipe(a: unknown, ...fns: Function[]): unknown {
  return fns.reduce((v, fn) => fn(v), a);
}

Each Overload Chains the Types

Overload two chains A -> B; overload three chains A -> B -> C. The compiler picks the matching overload based on how many functions you pass.

The Runtime Implementation

Under the overloads, a single reduce applies every function in turn. The implementation signature uses loose types; callers see the precise overloads.

function pipe(a: any, ...fns: Array<(x: any) => any>): any {
  return fns.reduce((acc, fn) => fn(acc), a);
}
console.log(pipe("  hi ", s => s.trim(), s => s.toUpperCase())); // HI

Type Changes Along the Pipe

Because each overload chains generics, a pipe can transform a value through several types while staying fully type-checked.

const out = pipe("hello", s => s.length, n => n > 3);
console.log(out); // true (string -> number -> boolean)

flow: pipe Without the Value

flow is like pipe but takes only the functions and returns a new function. You supply the value later, which is great for reuse.

const flow = <A, B, C>(f: (a: A) => B, g: (b: B) => C) =>
  (a: A): C => g(f(a));
const process = flow((n: number) => n + 1, (n: number) => n * 2);
console.log(process(5)); // 12

pipe vs flow vs compose

pipe applies functions to a value left to right; flow builds a reusable left-to-right function; compose builds a right-to-left function. Pick based on reading order and reuse.

Practical Pipelines

Libraries like fp-ts and Effect provide robust, fully-typed pipe with many overloads. Building a small one yourself shows exactly how the typing works.

Quick Check

Quick check on this lesson.

Recap

pipe(x, f, g) = g(f(x)) runs left to right and uses overload signatures to type each arity precisely, with a single reduce implementation. flow is the point-free variant returning a reusable function.

Frequently asked questions

Is the “Typed pipe and flow Utilities” lesson free?

Yes — the full text of “Typed pipe and flow Utilities” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Typed pipe and flow Utilities”?

Build left-to-right pipelines with accurate inference. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Typed pipe and flow Utilities” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy