TypeScript Academy · Lesson

The Builder Pattern Basics

Construct complex objects step by step.

The Builder Pattern Basics 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.

Why a Builder?

Some objects need many fields, and constructing them with a giant constructor full of positional arguments is error-prone. The Builder pattern constructs a complex object step by step, one named call at a time.

The Object We Want

Imagine an HTTP request with a url, method, headers, and body. Passing all of these to one constructor is hard to read. A builder lets us set each piece with a clearly named method.

interface HttpRequest {
  url: string;
  method: string;
  headers: Record<string, string>;
  body?: string;
}

A Basic Builder Class

The builder holds partial state internally and exposes setter methods. Each setter mutates the internal state and is responsible for one field.

class RequestBuilder {
  private url = "";
  private method = "GET";
  private headers: Record<string, string> = {};
  private body?: string;
}

Method Chaining Returns this

The trick that makes builders read fluently is returning this from every setter. Because each method returns the same builder, you can chain calls together.

class RequestBuilder {
  private url = "";
  setUrl(u: string): this {
    this.url = u;
    return this;
  }
}

Adding More Steps

Every configuration step follows the same pattern: store the value, then return this. Notice the return type this keeps the concrete builder type through the chain.

  setMethod(m: string): this {
    this.method = m;
    return this;
  }
  addHeader(k: string, v: string): this {
    this.headers[k] = v;
    return this;
  }

The build() Method

Finally a build() method assembles the accumulated state into the finished object. This is the only method that does not return the builder.

  build(): HttpRequest {
    return {
      url: this.url,
      method: this.method,
      headers: this.headers,
      body: this.body,
    };
  }

Using the Builder

Now construction reads like a sentence. Each step is named, order is flexible, and you never juggle positional arguments.

const req = new RequestBuilder()
  .setUrl("https://api.test")
  .setMethod("POST")
  .addHeader("Accept", "application/json")
  .build();
console.log(req.method);

A Full Runnable Example

Here is a self-contained version you can run. The builder accumulates state and build() produces the final immutable-looking object.

interface Req { url: string; method: string }
class B {
  private url = ""; private method = "GET";
  setUrl(u: string): this { this.url = u; return this; }
  setMethod(m: string): this { this.method = m; return this; }
  build(): Req { return { url: this.url, method: this.method }; }
}
const r = new B().setUrl("/users").setMethod("POST").build();
console.log(r.url, r.method);

Defaults Come for Free

Because the builder initializes fields with sensible defaults, callers only override what they need. Unset steps simply keep their defaults.

const getReq = new B().setUrl("/health").build();
console.log(getReq.method); // GET (default)

Readability vs Constructors

Compare new Req("/x", "POST", {}, undefined) with the chained builder. The builder version documents intent at every step and avoids mystery undefined placeholders.

When to Reach for It

Use a builder when an object has many optional parts, when construction happens in steps, or when you want a readable, self-documenting API. For two or three fields a plain object literal is simpler.

Quick Check

Quick check on this lesson.

Recap

A builder constructs complex objects step by step. Setters store one field each and return this to enable chaining, while build() assembles the final object. Builders shine when objects have many optional parts.

Frequently asked questions

Is the “The Builder Pattern Basics” lesson free?

Yes — the full text of “The Builder Pattern Basics” 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 “The Builder Pattern Basics”?

Construct complex objects step by step. 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 “The Builder Pattern Basics” 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