TypeScript Builder Design Pattern mirroring Java's approach

Question

TypeScript Builder Design Pattern mirroring Java's approach

In TypeScript 4.6.2, I am working on incorporating the Builder Pattern similar to Java. While I have come across suggestions that this may not be the ideal approach, I have certain limitations when it comes to module exports.

export class HttpRequest {

    static Builder = class {

        private body: string;

        setBody(body: string): HttpRequest.Builder {
            this.body = body;
            return this;
        }

        build(): HttpRequest {
            return new HttpRequest(this);
        }

    }

    private readonly body: string;

    constructor(builder: any) {
        this.body = builder.body;
    }

    getBody(): string {
        return this.body;
    }

}

However, I have encountered an issue with the setBody method not being able to return a HttpRequest.Builder type, resulting in the error message:

TS2702: 'HttpRequest' only refers to a type, but is being used as a namespace here.

It appears that adding // @ts-ignore before the method declaration or changing the method signature to setBody(body: string): any resolves the issue.

My goal is to implement this using nested classes to avoid having separate classes for HttpRequest and Builder. Is there a way to achieve this?

typescript

Answer 1

Answer №1

I wouldn't recommend using a builder with static classes. For more information, you can visit the link.

If you want to implement it in your own style, you can follow these steps:

class HttpRequest {

    static Builder = class {

        public body!: string;

        setBody(body: string): typeof HttpRequest.Builder {
            this.body = body;
            return this as any;
        }

        build(): HttpRequest {
            return new HttpRequest(this);
        }

    }

    private readonly body: string;

    constructor(builder: any) {
        this.body = builder.body;
    }

    getBody(): string {
        return this.body;
    }

}

Another approach would be to use the full pattern like this:

interface IHttpRequest
{
 setRequest(body:any):void
}

class HttpRequest implements IHttpRequest
{
  body!:string;
  setRequest(body:string){
    console.log('hook: setRequest called')
    this.body = body;
  }
}

interface IHttpBuilder{
  buildRequest(body:string): void
}

class HttpBuilder implements IHttpBuilder{
  private http = new HttpRequest();
  buildRequest(body:string){
    console.log('hook: buildRequest called')
    this.http.setRequest(body);
  }
}

class Basement{
  private http!: IHttpBuilder;
  constructor(http:IHttpBuilder){
    this.http = http;
  }
  build(body:string){
    console.log('hook: build called')
    this.http.buildRequest(body);
  }
}

let httpReq = new HttpBuilder();
let builder = new Basement(httpReq);

let body = "i am body!";
builder.build(body);

Answer 2

I wouldn't recommend using a builder with static classes. For more information, you can visit the link.

If you want to implement it in your own style, you can follow these steps:

class HttpRequest {

    static Builder = class {

        public body!: string;

        setBody(body: string): typeof HttpRequest.Builder {
            this.body = body;
            return this as any;
        }

        build(): HttpRequest {
            return new HttpRequest(this);
        }

    }

    private readonly body: string;

    constructor(builder: any) {
        this.body = builder.body;
    }

    getBody(): string {
        return this.body;
    }

}

Another approach would be to use the full pattern like this:

interface IHttpRequest
{
 setRequest(body:any):void
}

class HttpRequest implements IHttpRequest
{
  body!:string;
  setRequest(body:string){
    console.log('hook: setRequest called')
    this.body = body;
  }
}

interface IHttpBuilder{
  buildRequest(body:string): void
}

class HttpBuilder implements IHttpBuilder{
  private http = new HttpRequest();
  buildRequest(body:string){
    console.log('hook: buildRequest called')
    this.http.setRequest(body);
  }
}

class Basement{
  private http!: IHttpBuilder;
  constructor(http:IHttpBuilder){
    this.http = http;
  }
  build(body:string){
    console.log('hook: build called')
    this.http.buildRequest(body);
  }
}

let httpReq = new HttpBuilder();
let builder = new Basement(httpReq);

let body = "i am body!";
builder.build(body);

Answer 3

Answer №2

From my personal experience, utilizing a fluent API has proven to be most effective when creating typescript builders. Let me demonstrate how I would approach it in a more typescript-oriented manner.

interface HttpRequest {
    body: string;
}

export class HttpRequestBuilder {
    private body: string = "";

    public withBody(newBody: string): HttpRequestBuilder {
        this.body = newBody;
        return this;
    }

    public build(): HttpRequest {
        return {
            body: this.body
        }
    } 
}

To implement this, you simply instantiate the class

const httpRequest = new HttpRequestBuilder()
    .withBody("add a body here")
   .build();

This design also offers various possibilities for further extension.

Update: here's a potential example of an extension for added flexibility.

export interface HttpRequest {
    body: string;
    contentType: string;
}

export interface HttpRequestExtension extends HttpRequest {
    message: string;
}

export class HttpRequestBuilder {
    private body: string = "";
    private contentType: string = "";

    public withBody(newBody: string): HttpRequestBuilder {
        this.body = newBody;
        return this;
    }

    public withContentType(newContentType: string): HttpRequestBuilder {
        this.contentType = newContentType;
        return this;
    }

    public build(): HttpRequest {
        return {
            body: this.body,
            contentType: this.contentType
        }
    } 
}

export class HttpRequestExtensionBuilder extends HttpRequestBuilder {
    private message: string = "";

    public withMessage(newMessage: string): HttpRequestExtensionBuilder {
        this.message = newMessage;
        return this;
    }

    public build(): HttpRequestExtension {
        return {
            ...super.build(),
            message: this.message
        }
    }
}

This way, we have the option to use either builder:

const httpRequest = new HttpRequestBuilder()
    .withBody("add a body here")
    .withContentType("text/html")
    .build();

const httpRequest = new HttpRequestExtensionBuilder()
    .withMessage("add a message here")
    .withBody("add a body here")
    .withContentType("text/html")
    .build();

Answer 4

From my personal experience, utilizing a fluent API has proven to be most effective when creating typescript builders. Let me demonstrate how I would approach it in a more typescript-oriented manner.

interface HttpRequest {
    body: string;
}

export class HttpRequestBuilder {
    private body: string = "";

    public withBody(newBody: string): HttpRequestBuilder {
        this.body = newBody;
        return this;
    }

    public build(): HttpRequest {
        return {
            body: this.body
        }
    } 
}

To implement this, you simply instantiate the class

const httpRequest = new HttpRequestBuilder()
    .withBody("add a body here")
   .build();

This design also offers various possibilities for further extension.

Update: here's a potential example of an extension for added flexibility.

export interface HttpRequest {
    body: string;
    contentType: string;
}

export interface HttpRequestExtension extends HttpRequest {
    message: string;
}

export class HttpRequestBuilder {
    private body: string = "";
    private contentType: string = "";

    public withBody(newBody: string): HttpRequestBuilder {
        this.body = newBody;
        return this;
    }

    public withContentType(newContentType: string): HttpRequestBuilder {
        this.contentType = newContentType;
        return this;
    }

    public build(): HttpRequest {
        return {
            body: this.body,
            contentType: this.contentType
        }
    } 
}

export class HttpRequestExtensionBuilder extends HttpRequestBuilder {
    private message: string = "";

    public withMessage(newMessage: string): HttpRequestExtensionBuilder {
        this.message = newMessage;
        return this;
    }

    public build(): HttpRequestExtension {
        return {
            ...super.build(),
            message: this.message
        }
    }
}

This way, we have the option to use either builder:

const httpRequest = new HttpRequestBuilder()
    .withBody("add a body here")
    .withContentType("text/html")
    .build();

const httpRequest = new HttpRequestExtensionBuilder()
    .withMessage("add a message here")
    .withBody("add a body here")
    .withContentType("text/html")
    .build();

TypeScript Builder Design Pattern mirroring Java's approach

Answer №1

Answer №2

Similar questions

What steps do I need to take to implement Dispatch in a React Native project?

SlidingPane header in React disappearing behind Nav bar

Can a type alias be created for more than one parameter of a class or function with multiple type parameters?

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Monitor the true/false status of each element within an array and update their styles accordingly when they are considered active

Navigating global variables and functions in Vue3 with TypeScript

Injecting Dependencies with Angular 2 and the Ability to Include Optional Parameters

In React TypeScript, the property types of 'type' are not compatible with each other

What is the importance of adding the ".js" extension when importing a custom module in Typescript?

What is the best way to locate and access a JSON file that is relative to the module I am currently working

Utilizing the useContext hook within a strictly Typescript-based class component

Utilize Pipe for every instance of a variable in the Controller

NextJS introduces a unique functionality to Typescript's non-null assertion behavior

Encountering a getStaticProps error while using Typescript with Next.js

Using NextJS's API routes to implement Spotify's authorization flow results in a CORS error

Can someone please explain how to prevent Prettier from automatically inserting a new line at the end of my JavaScript file in VS Code?

Typescript controller inheritance leading to Error: $injector:unpr Unknown Provider due to minification

How can I effectively test static navigationOptions using Jest and Enzyme in a React Navigation and TypeScript environment?

Guide to importing OBJ file into three.js using TypeScript

How can I load a separate component.html file using a component.ts file?