TypeScript Academy · Lesson

Function Composition with Types

Compose functions while preserving type safety.

Function Composition with Types is a free TypeScript Academy lesson on CoddyKit — lesson 3 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.

What Is Composition?

Function composition combines small functions into a bigger one. compose(f, g) produces a function that first applies g, then feeds the result to f.

The Core Definition

Mathematically compose(f, g)(x) = f(g(x)). The functions run right to left: the rightmost runs first.

const compose = (f: (n: number) => number, g: (n: number) => number) =>
  (x: number) => f(g(x));
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
console.log(compose(inc, dbl)(5)); // 11 (5*2 then +1)

Right-to-Left Order

Order matters. compose(inc, dbl) doubles first then increments, while compose(dbl, inc) increments first. Read composition from the inside out.

console.log(compose(dbl, inc)(5)); // 12 (5+1 then *2)

Typing Composition with Generics

Generics let the input and output types differ. g maps A to B, f maps B to C, and the result maps A to C.

function compose<A, B, C>(f: (b: B) => C, g: (a: A) => B): (a: A) => C {
  return a => f(g(a));
}

Changing Types Along the Way

Because the generics chain A -> B -> C, composition can transform a value through several shapes, such as string to number to string.

const length = (s: string) => s.length;
const toStr = (n: number) => "len=" + n;
const describe = compose(toStr, length);
console.log(describe("hello")); // len=5

The Type Boundary Must Match

The output of g must match the input of f. If they disagree, the compiler rejects the composition, catching wiring mistakes early.

// compose(length, toStr) would error:
// toStr returns string, length expects string -> ok here,
// but mismatched pairs are flagged by the compiler.

Composing Three Functions

You can nest composition or write a three-argument version. The right-to-left rule still applies across all of them.

const compose3 = <A, B, C, D>(
  f: (c: C) => D, g: (b: B) => C, h: (a: A) => B
) => (a: A): D => f(g(h(a)));
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
const neg = (n: number) => -n;
console.log(compose3(neg, dbl, inc)(3)); // -8

Composition Builds Pipelines

By composing tiny, pure functions you assemble complex transformations declaratively. Each piece stays testable in isolation.

const trim = (s: string) => s.trim();
const upper = (s: string) => s.toUpperCase();
const clean = compose(upper, trim);
console.log(clean("  hi ")); // HI

Why Pure Functions Compose Best

Composition assumes each function depends only on its input. Pure functions guarantee this, so composing them produces another predictable pure function.

compose vs pipe

compose runs right to left and mirrors math notation. Many people prefer left-to-right reading, which is what pipe provides, covered next.

Keep Pieces Small

Composition shines when each function does one tiny thing. Small, named, pure steps make the composed pipeline self-documenting and easy to rearrange.

Quick Check

Quick check on this lesson.

Recap

compose(f, g)(x) = f(g(x)), running right to left. Generic typing chains A -> B -> C so the output of g must match the input of f, letting the compiler verify the pipeline of small pure functions.

Frequently asked questions

Is the “Function Composition with Types” lesson free?

Yes — the full text of “Function Composition with Types” 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 “Function Composition with Types”?

Compose functions while preserving type safety. 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 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Function Composition with Types” 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