'typeof Component' 类型的参数不可分配给 'ComponentType<Component> 类型的参数答案

【问题标题】：Argument of type 'typeof Component' is not assignable to parameter of type 'ComponentType<Component>'typeof Component' 类型的参数不可分配给 'ComponentType<Component> 类型的参数
【发布时间】：2020-01-06 06:45:16
【问题描述】：

我希望有一项服务可以根据调用服务的组件打开不同的对话框。

这是来自我的服务的代码。 pictureOfCode

public addEditItem(origin: string, item?: MoneyModel|BudgetItemModel|WorkflowModel|SportItemModel) {
    const dialogRef = this.dialog.open(this.pickDialog(origin), {
      data: {
        item: item ? item : null,
        origin: origin,
      },
      width: '500px',
  });
    dialogRef.afterClosed().subscribe(result => {
        this.data.next(result);
        console.log('The dialog was closed', result ? result : 'by clicking on cancel');
    });
}

public pickDialog(origin: string) {
    switch (origin) {
      case 'workflow': return AddEditWorkflowItemComponent;
      case 'sport': return AddEditSportItemComponent;
    }
}

当我在本地运行它时它可以工作，但是由于这个错误而构建失败：

类型参数'typeof AddEditWorkflowItemComponent | typeof AddEditSportItemComponent' 不可分配给类型为 'ComponentType |模板参考'。类型 'typeof AddEditSportItemComponent' 不可分配给类型 'ComponentType |模板参考'。类型“typeof AddEditSportItemComponent”不可分配给类型“ComponentType”。 “AddEditSportItemComponent”类型中缺少属性“authors”，但在“AddEditWorkflowItemComponent”类型中是必需的。

有没有一种方法可以将 switch 的返回从 typeof Component 转换为 ComponentType？或者，有没有一种方法可以更好地切换对话框打开的组件？任何帮助表示赞赏。

【问题讨论】：

标签： angular typescript

【解决方案1】：

从您的图像中，AddEditSportItemComponent 中缺少道具authors，因此要解决您的问题，您可以将pickDialog 方法返回any：

  const dialogRef = this.dialog.open((this.pickDialog(origin) as any), {
      data: {
        item: item ? item : null,
        origin: origin,
      },
      width: '500px',
  });

或创建一个同时适合AddEditWorkflowItemComponent 和AddEditSportItemComponent 的接口，并处理返回它的方法。

export interface ComponentType<T = any> {
  new (...args: any[]): T;
}

public pickDialog(origin: string): ComponentType {
    switch (origin) {
      case 'workflow': return AddEditWorkflowItemComponent;
      case 'sport': return AddEditSportItemComponent;
    }
}

如果 2 个类是不同的，并且您想使用类型安全，那么您最终将为每种类型创建 2 个不同的方法。

【讨论】：