Builder pattern with generics in Typescript - Step-by-Step Execution

Concept Flow - Builder pattern with generics

Start Builder

↓

Set Property 1

↓

Set Property 2

↓

Set Property N

↓

Call build()

↓

Return Built Object

The builder starts empty, sets properties one by one, then builds the final object.

Execution Sample

Typescript

class Builder<T> {
  private obj: Partial<T> = {};
  set<K extends keyof T>(key: K, value: T[K]): this {
    this.obj[key] = value;
    return this;
  }
  build(): T { return this.obj as T; }
}

This code creates a generic builder that sets properties and builds the final object.

Execution Table

Step	Action	Key	Value	Object State	Return
1	Create Builder	-	-	{}	Builder instance
2	Set property	name	"Alice"	{"name": "Alice"}	Builder instance
3	Set property	age	30	{"name": "Alice", "age": 30}	Builder instance
4	Build object	-	-	{"name": "Alice", "age": 30}	{"name": "Alice", "age": 30}

💡 build() returns the final object with all set properties.

Variable Tracker

Variable	Start	After 1	After 2	Final
obj	{}	{"name": "Alice"}	{"name": "Alice", "age": 30}	{"name": "Alice", "age": 30}

Key Moments - 3 Insights

Why does set() return 'this' instead of void?

Returning 'this' allows chaining multiple set() calls in one line, as shown in steps 2 and 3 of the execution_table.

What does 'Partial<T>' mean in the builder?

'Partial<T>' means the object can have zero or more properties of T set at any time, so we can build it step-by-step before finalizing.

Why do we cast 'this.obj as T' in build()?

Because 'obj' is Partial<T> (may be incomplete), but build() promises to return a full T object after all properties are set.

Visual Quiz - 3 Questions

Look at the execution_table, what is the object state after step 2?

A {}

B {"name": "Alice"}

C {"age": 30}

D {"name": "Alice", "age": 30}

💡 Hint

Check the 'Object State' column for step 2 in the execution_table.

At which step does the build() method return the final object?

A Step 4

B Step 1

C Step 3

D Step 2

💡 Hint

Look for the 'Action' column with 'Build object' in the execution_table.

If set() did not return 'this', how would chaining calls change?

A The build() method would fail.

B Chaining would still work the same.

C Chaining would not work; you couldn't call set() multiple times in one line.

D The object would be empty.

💡 Hint

Refer to the key_moments explanation about why set() returns 'this'.

Concept Snapshot

Builder pattern with generics:
- Use a generic class Builder<T> with Partial<T> to hold properties.
- set<K extends keyof T>(key, value) sets properties and returns 'this' for chaining.
- build() returns the final object as type T.
- Allows step-by-step object creation with type safety.

Full Transcript

This example shows how a generic Builder class works in TypeScript. We start with an empty object of type Partial<T>. Each set() call adds a property and returns the builder itself, so we can chain calls. Finally, build() returns the complete object as type T. The execution table traces creating the builder, setting 'name' and 'age', and building the final object. Variables track how the internal object changes. Key moments explain why set() returns 'this', what Partial<T> means, and why we cast in build(). The quiz tests understanding of object state after steps, when build() returns, and the importance of returning 'this' for chaining.