使用 typescript 泛型将方法重构为单个方法

Question

如何使用 typescript 泛型来重构它？我有这 3 种方法，我希望将它们写成只接受 TYPE T 的一种方法 - 以消除重复代码。

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

Answer 1

因为参数和泛型相同，所以不需要泛型，直接使用参数即可。

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

然后只需使用适当的组件调用函数：

this.initializeIfame(BlueComponent)

但是，如果您确实需要表示要返回的内容，您可以使用这样的泛型：

    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)