Type-safe builder pattern in Typescript - Step-by-Step Execution

Concept Flow - Type-safe builder pattern

Start Builder

↓

Set Property 1

→Check Type

| Yes↓

Set Property 2

→Check Type

| Yes↓

... More Properties

↓

Build Object

↓

Return Fully Typed Object

The builder starts empty, each property is set with type checks, and finally builds a fully typed object.

Execution Sample

Typescript

class UserBuilder {
  private name?: string;
  private age?: number;

  setName(name: string) {
    this.name = name;
    return this;
  }

  setAge(age: number) {
    this.age = age;
    return this;
  }

  build(): { name: string; age: number } {
    if (!this.name || this.age === undefined) throw new Error('Missing properties');
    return { name: this.name, age: this.age };
  }
}

const user = new UserBuilder().setName('Alice').setAge(30).build();

This code builds a user object step-by-step, ensuring name and age are set before building.

Execution Table

Step	Action	Property Set	Property Value	Return Value	Notes
1	Create UserBuilder instance	name	undefined	UserBuilder instance	Builder starts empty
2	Call setName('Alice')	name	'Alice'	UserBuilder instance	Name property set with correct type
3	Call setAge(30)	age	30	UserBuilder instance	Age property set with correct type
4	Call build()	name	'Alice'	{ name: 'Alice', age: 30 }	Build returns fully typed object
5	End	-	-	-	All required properties set, build successful

💡 Execution stops after build returns the fully typed object.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4 (build)
name	undefined	'Alice'	'Alice'	'Alice'
age	undefined	undefined	30	30
user	undefined	undefined	undefined	{ name: 'Alice', age: 30 }

Key Moments - 2 Insights

Why does build() throw an error if a property is missing?

Because the build() method checks if required properties like name and age are set (see step 4 in execution_table). This ensures the final object is complete and type-safe.

Why do setName and setAge return 'this'?

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

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'age' after step 2?

A 30

B undefined

C 'Alice'

D null

💡 Hint

Check the 'Property Value' column for 'age' at step 2 in execution_table.

At which step does the builder return the fully typed object?

A Step 4

B Step 3

C Step 2

D Step 1

💡 Hint

Look for the 'Return Value' column showing the final object in execution_table.

If setAge() returned void instead of 'this', how would the chaining change?

A Chaining would still work the same

B setName() would not work

C Chaining would break after setAge() call

D build() would return undefined

💡 Hint

Check how returning 'this' enables chaining in steps 2 and 3 of execution_table.

Concept Snapshot

Type-safe builder pattern in TypeScript:
- Use class with private optional properties
- Setter methods assign values and return 'this' for chaining
- build() checks all required properties are set
- build() returns fully typed object
- Ensures object is complete and type-safe before use

Full Transcript

The type-safe builder pattern in TypeScript helps create objects step-by-step while ensuring all required properties are set with correct types. We start by creating a builder instance with empty properties. Each setter method sets a property and returns the builder itself to allow chaining. When build() is called, it checks if all required properties are set; if not, it throws an error. If all properties are present, build() returns the fully typed object. This pattern prevents incomplete or wrongly typed objects from being created. The execution table shows each step: creating the builder, setting name and age, then building the final object. Variable tracking shows how properties change over time. Key moments clarify why build() checks properties and why setters return 'this'. The quiz tests understanding of property values at steps, when the object is returned, and the importance of returning 'this' for chaining.

Practice

1.

What is the main benefit of using a type-safe builder pattern in TypeScript?

easy

A. It ensures all required properties are set before creating the object.

B. It makes the code run faster at runtime.

C. It automatically generates UI forms.

D. It removes the need for interfaces.

Solution

1. Step 1: Understand the purpose of type-safe builder pattern

   The pattern helps build objects step-by-step while ensuring correctness.

2. Step 2: Identify the key benefit

   It uses TypeScript's type system to check that all required properties are set before final object creation.

3. Final Answer:

   It ensures all required properties are set before creating the object. -> Option A

4. Quick Check:

   Type safety = required properties checked [OK]

Hint: Remember: type-safe means catching errors before running [OK]

Common Mistakes:

• Thinking it improves runtime speed
• Confusing it with UI generation
• Assuming it removes interfaces

2.

Which of the following is the correct way to declare a generic builder class in TypeScript?

class Builder<T> {
  private data: T;
  constructor() {
    this.data = {} as T;
  }
  build(): T {
    return this.data;
  }
}

easy

A. class Builder<T> { private data: T; constructor() { this.data = undefined; } build(): T { return this.data; } }

B. class Builder { private data: any; constructor() { this.data = {}; } build(): any { return this.data; } }

C. class Builder<T> { private data: T; constructor() { this.data = {} as T; } build(): T { return this.data; } }

D. class Builder<T> { private data: T; constructor() { this.data = null; } build(): T { return this.data; } }

Solution

1. Step 1: Check generic class declaration

   class Builder<T> { private data: T; constructor() { this.data = {} as T; } build(): T { return this.data; } } correctly declares a generic class with <T> and initializes data as {} as T.

2. Step 2: Verify build method return type

   The build() method returns data typed as T, matching the generic type.

3. Final Answer:

   class Builder<T> { private data: T; constructor() { this.data = {} as T; } build(): T { return this.data; } } -> Option C

4. Quick Check:

   Generic class with typed data = class Builder<T> { private data: T; constructor() { this.data = {} as T; } build(): T { return this.data; } } [OK]

Hint: Look for generic <T> and proper initialization [OK]

Common Mistakes:

• Using any instead of generic type
• Initializing data with null or undefined
• Missing generic parameter in class

3.

Consider this TypeScript code using a type-safe builder pattern:

interface User {
  name: string;
  age: number;
}

class UserBuilder {
  private user = {} as Partial<User>;
  setName(name: string) { this.user.name = name; return this; }
  setAge(age: number) { this.user.age = age; return this; }
  build(): User {
    if (!this.user.name || !this.user.age) throw new Error('Missing fields');
    return this.user as User;
  }
}

const user = new UserBuilder().setName('Alice').setAge(30).build();
console.log(user);

What will be the output?

medium

A. { name: 'Alice', age: 30 }

B. Error: Missing fields

C. undefined

D. { name: 'Alice' }

Solution

1. Step 1: Trace method calls on UserBuilder

   The builder sets name to 'Alice' and age to 30, so both required fields are set.

2. Step 2: Check build method behavior

   Since both fields exist, no error is thrown, and the object is returned as User.

3. Final Answer:

   { name: 'Alice', age: 30 } -> Option A

4. Quick Check:

   All fields set = object returned [OK]

Hint: Check if all required fields are set before build [OK]

Common Mistakes:

• Assuming error thrown even when fields set
• Expecting undefined output
• Missing age property in output

4.

Identify the error in this type-safe builder pattern code and select the fix:

interface Car {
  make: string;
  year: number;
}

class CarBuilder {
  private car = {} as Partial<Car>;
  setMake(make: string) { this.car.make = make; return this; }
  setYear(year: number) { this.car.year = year; return this; }
  build(): Car {
    if (!this.car.make || !this.car.year) throw new Error('Missing fields');
    return this.car;
  }
}

medium

A. Initialize car as Car instead of Partial<Car>

B. Change return type of build() to Partial<Car>

C. Remove the if check for missing fields

D. Cast return value as Car: return this.car as Car;

Solution

1. Step 1: Identify the type mismatch in build()

   The method returns this.car which is typed as Partial<Car>, but the return type is Car.

2. Step 2: Fix by casting to Car

   To satisfy the return type, cast this.car as Car after checking required fields.

3. Final Answer:

   Cast return value as Car: return this.car as Car; -> Option D

4. Quick Check:

   Return type must match method signature [OK]

Hint: Cast partial object to full type after validation [OK]

Common Mistakes:

• Changing return type to Partial<Car>
• Removing validation checks
• Initializing with full Car without setting fields

5.

You want to create a type-safe builder for a Product with required id and name, and optional description. Which approach best enforces setting required fields before build?

interface Product {
  id: number;
  name: string;
  description?: string;
}

// Which builder pattern enforces required fields at compile time?

hard

A. Use a single class with optional properties and runtime checks in build()

B. Use generics with flags tracking set fields and conditional types for build()

C. Use a function that returns a partial Product object without checks

D. Use inheritance to extend a base builder class without generics

Solution

1. Step 1: Understand compile-time enforcement

   Only generics with flags and conditional types can enforce required fields before build at compile time.

2. Step 2: Compare options

   Use generics with flags tracking set fields and conditional types for build() uses TypeScript generics and conditional types to track which fields are set, preventing build() call until required fields are set.

3. Final Answer:

   Use generics with flags tracking set fields and conditional types for build() -> Option B

4. Quick Check:

   Compile-time safety = generics + conditional types [OK]

Hint: Use generics and conditional types to enforce required fields [OK]

Common Mistakes:

• Relying only on runtime checks
• Using inheritance without generics
• Returning partial objects without enforcement