CODEWITHSUNDEEP
angulartypescriptgenerics
Gani Lastra
Gani Lastra

Reputation: 255

Refactor methods into a Single Method by using typescript Generics

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(); 
    }

Upvotes: 1

Views: 121

Answers (1)

Yair Cohen
Yair Cohen

Reputation: 2248

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)

Upvotes: 1

Related Questions