时间戳

首页 > 解决方案 > TypeScript 编译器不识别接口方法，尽管它已实现

angular - TypeScript 编译器不识别接口方法，尽管它已实现

问题描述

代码如下。

图表模态界面.ts

export interface ChartModal {
    onModalInit(data: ChartModalContext): void;
}

图表模态上下文.ts

export class ChartModalContext {}

工作中产阶级模态上下文.ts

export class JobMiddleClassModalContext extends  ChartModalContext {
    public jobLargeClassText: string;
    public jobMiddleClassText: string;
}

工作中产阶级modal.ts

export class JobMiddleClassModalComponent implements OnInit, ChartModal {
    ngOnInit() {}

    onModalInit(data: JobMiddleClassModalContext): void {}
}

图表-modal.service.ts

@Injectable()
export class ChartModalService {
    public show(clazz: ChartModal, data?: ChartModalContext): ChartModalRef
    {
        // .....
    }
}

选项卡作业类型.component.ts

export class TabJobTypeComponent implements OnInit, OnDestroy {

    constructor(private chartModalService: ChartModalService) {}

    public onClickJobMiddleClassPopup(): void {
        const data: JobMiddleClassModalContext 
            = new JobMiddleClassModalContext();
        data.jobLargeClassText = 'largeA';
        data.jobMiddleClassText = 'middleB';
        // error occures at below line 
        this.chartModalService.show(JobMiddleClassModalComponent, data);  
    }
}

错误信息：

错误 TS2345：“typeof JobMiddleClassModalComponent”类型的参数不可分配给“ChartModal”类型的参数。“typeof JobMiddleClassModalComponent”类型中缺少属性“onModalInit”。

我的开发环境：

Angular6
TypeScript2.7.2
WebStorm2018.1.4

标签： angulartypescript

解决方案

看起来该show方法需要一个实例而JobMiddleClassModalComponent不是类型本身，即：

this.chartModalService.show(new JobMiddleClassModalComponent(), data);

如果要传递类型JobMiddleClassModalComponent，则必须使用等效类型，例如：

abstract class AbstractChartModal {
    abstract onModalInit(data: ChartModalContext): void;
}

然后，您可以将您的方法签名更新为：

class ChartModalService {
    public show(clazz: typeof AbstractChartModal, data?: ChartModalContext): ChartModalRef
    {
        return {};
    }
}

这反过来又允许您使用以下方式调用它：

this.chartModalService.show(JobMiddleClassModalComponent, data);

推荐阅读