Type-safe builder pattern in Typescript - Mini Project: Build & Apply

Type-safe builder pattern

📖 Scenario: You are creating a configuration builder for a user profile setup in a web app. The builder should ensure that required fields are set before building the final profile object.

🎯 Goal: Build a type-safe builder pattern in TypeScript that enforces setting required properties name and age before allowing the build() method to be called.

📋 What You'll Learn

Create an interface UserProfile with name (string), age (number), and optional email (string).

Create a builder class UserProfileBuilder that allows setting name, age, and email.

Use TypeScript generics and conditional types to enforce that name and age must be set before build() is callable.

Demonstrate building a user profile with all required fields set and print the result.

💡 Why This Matters

🌍 Real World

Builder patterns help create complex objects step-by-step, ensuring required data is set before use, common in UI forms and configuration setups.

💼 Career

Understanding type-safe builders improves code safety and maintainability, valuable for frontend and backend TypeScript developers.

1

Define the UserProfile interface

Create an interface called UserProfile with these exact properties: name of type string, age of type number, and optional email of type string.

Typescript

// Your code here

Need a hint?

Use the interface keyword and mark email as optional with ?.

2

Create the UserProfileBuilder class with generic flags

Create a class called UserProfileBuilder with two generic boolean parameters NameSet and AgeSet both defaulting to false. Add private properties _name (string or undefined), _age (number or undefined), and _email (string or undefined). Add methods setName(name: string) returning UserProfileBuilder<true, AgeSet> and setAge(age: number) returning UserProfileBuilder<NameSet, true>. Also add setEmail(email: string) returning this. Do not implement build() yet.

Typescript

interface UserProfile {
    name: string;
    age: number;
    email?: string;
}

// Your code here

Need a hint?

Use generics with default false and return this casted to the new generic type for setName and setAge.

3

Add the type-safe build() method

Add a method build() that returns UserProfile. Use a conditional type to allow build() only if both NameSet and AgeSet are true. Otherwise, it should cause a TypeScript error. Inside build(), return an object with name, age, and email from the private properties.

Typescript

interface UserProfile {
    name: string;
    age: number;
    email?: string;
}

class UserProfileBuilder {
    private _name?: string;
    private _age?: number;
    private _email?: string;

    setName(name: string): UserProfileBuilder {
        this._name = name;
        return this as unknown as UserProfileBuilder;
    }

    setAge(age: number): UserProfileBuilder {
        this._age = age;
        return this as unknown as UserProfileBuilder;
    }

    setEmail(email: string): this {
        this._email = email;
        return this;
    }

    // Add the build() method below
    // Your code here
}

Need a hint?

Use build(this: UserProfileBuilder<true, true>) to restrict calling build() only when both flags are true.

4

Build and print a user profile

Create a constant profile by calling new UserProfileBuilder(), then chaining setName("Alice"), setAge(30), and setEmail("[e-mail]"), and finally calling build(). Then print profile using console.log(profile).

Typescript

interface UserProfile {
    name: string;
    age: number;
    email?: string;
}

class UserProfileBuilder {
    private _name?: string;
    private _age?: number;
    private _email?: string;

    setName(name: string): UserProfileBuilder {
        this._name = name;
        return this as unknown as UserProfileBuilder;
    }

    setAge(age: number): UserProfileBuilder {
        this._age = age;
        return this as unknown as UserProfileBuilder;
    }

    setEmail(email: string): this {
        this._email = email;
        return this;
    }

    build(this: UserProfileBuilder): UserProfile {
        return {
            name: this._name!,
            age: this._age!,
            email: this._email
        };
    }
}

// Your code here

Need a hint?

Chain the methods exactly as new UserProfileBuilder().setName("Alice").setAge(30).setEmail("[e-mail]").build() and print the result.