Angular中以下代码里const compFactory的严格类型是什么？

先看你提供的代码块：

const componentMapper = {
  input: InputComponent,
  button: ButtonComponent,
  select: SelectComponent,
  date: DateComponent,
  radiobutton: RadiobuttonComponent,
  checkbox: CheckboxComponent,
  switch: SwitchComponent,
  textarea: TextAreaComponent
};
const compFactory = this.resolver.resolveComponentFactory(componentMapper[this.field.type]);

严格类型说明 #

compFactory的严格类型是**ComponentFactory<InputComponent | ButtonComponent | SelectComponent | DateComponent | RadiobuttonComponent | CheckboxComponent | SwitchComponent | TextAreaComponent>**，但这种写法过于冗长，更优雅的实现是先定义一个联合类型：

// 统一声明所有表单组件的联合类型
type FormComponent = InputComponent 
  | ButtonComponent 
  | SelectComponent 
  | DateComponent 
  | RadiobuttonComponent 
  | CheckboxComponent 
  | SwitchComponent 
  | TextAreaComponent;

// 用联合类型约束compFactory
const compFactory: ComponentFactory<FormComponent> = this.resolver.resolveComponentFactory(componentMapper[this.field.type]);

如果你的所有表单组件都继承自同一个基组件（比如BaseFormComponent），还能进一步简化类型：

const compFactory: ComponentFactory<BaseFormComponent> = this.resolver.resolveComponentFactory(componentMapper[this.field.type]);

原理补充 #

Angular的ComponentFactoryResolver.resolveComponentFactory方法，接收组件类作为参数后，会返回对应组件的ComponentFactory<T>实例，其中T就是该组件的类型。由于componentMapper[this.field.type]可能返回8种组件类型中的任意一种，所以严格类型需要覆盖所有可能的组件类型联合，或者通过基类统一约束。

内容的提问来源于stack exchange，提问作者vijesh