TypeScript Academy · Lesson

Parser Combinator Concepts

Compose small parsers into larger ones.

Parser Combinator Concepts is a free TypeScript Academy lesson on CoddyKit — lesson 1 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 a Parser

A parser reads input (usually a string) and produces structured output, or fails. We start at the value level to build intuition before moving the same ideas into the type system.

type Parser<T> = (input: string) => { value: T; rest: string } | null;
// Consumes part of the input, returns a value and the leftover

A Tiny Parser

The simplest parser matches a literal prefix. If the input starts with the expected text, it succeeds and returns the remaining string; otherwise it returns null.

function literal(prefix: string): Parser<string> {
  return input =>
    input.startsWith(prefix)
      ? { value: prefix, rest: input.slice(prefix.length) }
      : null;
}
console.log(literal("ab")("abc"));

Combinators

A combinator takes small parsers and builds bigger ones. This compositional style is why the approach is called parser combinators: you assemble complex parsers from simple, reusable parts.

// Small parsers: digit, letter, literal
// Combinators: sequence, choice, many
// Compose them into: number, identifier, expression

Sequencing

A sequence combinator runs one parser, then another on the leftover, pairing their results. Both must succeed for the sequence to succeed.

function seq<A, B>(pa: Parser<A>, pb: Parser<B>): Parser<[A, B]> {
  return input => {
    const ra = pa(input);
    if (!ra) return null;
    const rb = pb(ra.rest);
    if (!rb) return null;
    return { value: [ra.value, rb.value], rest: rb.rest };
  };
}

Using Sequence

Combine two literals to parse them in order. The result holds both matched pieces and the remaining input.

const ab = seq(literal("a"), literal("b"));
const r = ab("abc");
console.log(r); // { value: ["a","b"], rest: "c" }

Choice

A choice combinator tries the first parser; if it fails, it tries the second. This expresses alternatives, like "a digit or a letter".

function alt<T>(p1: Parser<T>, p2: Parser<T>): Parser<T> {
  return input => p1(input) ?? p2(input);
}

Repetition

A many combinator applies a parser repeatedly until it fails, collecting all results. This parses lists, digit runs, or whitespace.

function many<T>(p: Parser<T>): Parser<T[]> {
  return input => {
    const out: T[] = [];
    let rest = input;
    let r = p(rest);
    while (r) { out.push(r.value); rest = r.rest; r = p(rest); }
    return { value: out, rest };
  };
}

Mapping Results

A map combinator transforms a parser result without changing what it consumes, for example turning matched digit characters into a number.

function map<A, B>(p: Parser<A>, f: (a: A) => B): Parser<B> {
  return input => {
    const r = p(input);
    return r ? { value: f(r.value), rest: r.rest } : null;
  };
}

Building Up

From these few combinators (literal, seq, alt, many, map) you can parse real grammars: numbers, identifiers, even small expression languages. Each layer composes the one below it.

const digit = alt(literal("0"), literal("1")); // toy digit
const digits = many(digit);
console.log(digits("0110x"));

From Values to Types

The crucial insight: the same compositional structure works at the type level. There, the "input" is a string literal type and parsers are conditional types using template literal inference. We move there next.

// Value level: (input: string) => { value, rest } | null
// Type level:  conditional types over string literal types

Why Type-Level Parsing

Type-level parsers let the compiler understand the structure of string literals: route paths, format strings, query keys. The combinator intuition you built here maps directly onto the type-level techniques in the rest of this course.

// Goal: parse "users/:id" into { id: string } at compile time

Quick Check

Test your understanding of parser combinators.

Recap

You built parser intuition at the value level.

A parser consumes input and returns a value plus leftover, or fails.
Combinators (seq, alt, many, map) compose small parsers into big ones.
The same structure applies at the type level.

Next: splitting strings in the type system.

Frequently asked questions

Is the “Parser Combinator Concepts” lesson free?

Yes — the full text of “Parser Combinator Concepts” 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 “Parser Combinator Concepts”?

Compose small parsers into larger ones. 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 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Parser Combinator Concepts” 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