Refactor methods into a Single Method by using typescript Generics

Question

How do I refactor this using typescript generics? I have this 3 methods and I want these to be written down to just one method that accepts the TYPE T - to eliminate repeated code.

 private initializeBlueComponentIframe() {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(BlueComponent);
        this.dynamicIframeContent.clear();
        const dynamicComponent = <BlueComponent>this.dynamicIframeContent.createComponent(componentFactory).instance;
        dynamicComponent.facade = this;
        dynamicComponent.url = this.url;
        dynamicComponent.initialize();
    }

    private initializeBlackComponentIframe() {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(BlackComponent);
        this.dynamicIframeContent.clear();
        const dynamicComponent = <BlackComponent>this.dynamicIframeContent.createComponent(componentFactory).instance;
        dynamicComponent.facade = this;
        dynamicComponent.url = this.url;
        dynamicComponent.initialize();    
    }

    private initializeGREENIframe() {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(GreenComponent);
        this.dynamicIframeContent.clear();
        const dynamicComponent = <GreenComponent>this.dynamicIframeContent.createComponent(componentFactory).instance;
        dynamicComponent.facade = this;
        dynamicComponent.url = this.url;
        dynamicComponent.initialize(); 
    }

Yair Cohen · Accepted Answer · 2020-11-17 05:30:31Z

1

Because the parameter and generic are the same there's no need for generic and you can just use the parameter.

 type IframeComponents = BlueComponent | BlackComponent | Green Component


    private initializeIfame(component: IframeComponents) {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        this.dynamicIframeContent.clear();
        const dynamicComponent = <component>this.dynamicIframeContent.createComponent(componentFactory).instance;
        dynamicComponent.facade = this;
        dynamicComponent.url = this.url;
        dynamicComponent.initialize();
    }

Then simply call the function with the proper component:

this.initializeIfame(BlueComponent)

However if you do need to denote what is being return you could use a generic like this:

    private initializeIfame<T>(component: IframeComponents): T {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        this.dynamicIframeContent.clear();
        const dynamicComponent = <T>this.dynamicIframeContent.createComponent(componentFactory).instance;
        dynamicComponent.facade = this;
        dynamicComponent.url = this.url;
        dynamicComponent.initialize();
        // optional return
        return component;
    }

this.initializeIfame<BlueComponent>(BlueComponent)

edited Nov 17, 2020 at 5:30

answered Nov 17, 2020 at 5:16

Yair Cohen

2,28111 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gani Lastra Over a year ago

I did create an interface named IIframe that implemented by black, blue, and green components and passed that as parameter. like initializeIframe(component: IIframe). Same idea as this one

Collectives™ on Stack Overflow

Refactor methods into a Single Method by using typescript Generics

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related