Angular：扩展对象数组类型使用报错，如何正确处理？

问题原因 #

你的ProjectOnePagerDTO.Widgets数组类型是IOnePagerWidget[]，TypeScript仅能识别每个元素是基础的IOnePagerWidget（仅包含Type属性），无法确定其具体子类型（比如OnePagerWidgetTypePicture）。当你直接将数组元素传给要求OnePagerWidgetTypePicture类型的组件输入时，TypeScript会报错——因为基础类型中没有ProjectLogo这个必填属性。

解决方案 #

方案一：模板内用类型守卫+条件渲染 #

先定义类型守卫函数，用于判断widget的具体子类型：

// 假设OnePagerWidgetType是包含Picture枚举值的类型
function isPictureWidget(widget: IOnePagerWidget): widget is OnePagerWidgetTypePicture {
  return widget.Type === OnePagerWidgetType.Picture;
}

// 同理定义描述组件的类型守卫
function isDescriptionWidget(widget: IOnePagerWidget): widget is OnePagerWidgetTypeProjectDescription {
  return widget.Type === OnePagerWidgetType.ProjectDescription;
}

在模板中结合*ngIf和类型守卫，确保只有匹配类型的widget才传入对应组件：

<ng-container *ngFor="let widget of projectOnePager.Widgets">
  <app-opw-project-picture 
    *ngIf="isPictureWidget(widget)" 
    [widget]="widget">
  </app-opw-project-picture>
  
  <app-opw-project-description 
    *ngIf="isDescriptionWidget(widget)" 
    [widget]="widget">
  </app-opw-project-description>
</ng-container>

通过*ngIf的类型守卫判断后，TypeScript会自动推断widget为对应子类型，不会再触发类型错误。

方案二：组件内修改输入类型并做类型断言 #

如果不想在模板中添加判断，可以将组件输入类型改为基础接口，内部通过类型断言转换，并添加校验避免运行时错误：

export class OpwProjectPictureComponent {
  private _widget!: OnePagerWidgetTypePicture;

  @Input() 
  set widget(value: IOnePagerWidget) {
    // 校验传入的widget类型是否正确
    if (value.Type !== OnePagerWidgetType.Picture) {
      throw new Error("传入的widget类型错误，需为Picture类型");
    }
    this._widget = value as OnePagerWidgetTypePicture;
  }

  get widget(): OnePagerWidgetTypePicture {
    return this._widget;
  }
}

也可以直接将输入类型设为IOnePagerWidget，使用时再断言，但务必确保传入的是对应子类型：

export class OpwProjectPictureComponent {
  @Input() widget: IOnePagerWidget;

  get projectLogo(): string {
    return (this.widget as OnePagerWidgetTypePicture).ProjectLogo;
  }
}

方案三：优化为可辨识联合类型（推荐） #

如果OnePagerWidgetType是枚举类型，可以将IOnePagerWidget定义为可辨识联合类型，让TypeScript自动根据Type属性推断子类型：

export enum OnePagerWidgetType {
  Picture = "picture",
  ProjectDescription = "description"
}

// 用联合类型替代基础接口
export type IOnePagerWidget = 
  | OnePagerWidgetTypePicture 
  | OnePagerWidgetTypeProjectDescription;

export interface OnePagerWidgetTypePicture {
  Type: OnePagerWidgetType.Picture;
  ProjectLogo: string;
}

export interface OnePagerWidgetTypeProjectDescription {
  Type: OnePagerWidgetType.ProjectDescription;
  Text: string;
}

此时在模板中直接通过Type判断即可自动推断类型，无需额外类型守卫：

<ng-container *ngFor="let widget of projectOnePager.Widgets">
  <app-opw-project-picture 
    *ngIf="widget.Type === OnePagerWidgetType.Picture" 
    [widget]="widget">
  </app-opw-project-picture>
  
  <app-opw-project-description 
    *ngIf="widget.Type === OnePagerWidgetType.ProjectDescription" 
    [widget]="widget">
  </app-opw-project-description>
</ng-container>

总结 #

推荐使用方案一或方案三，这两种方式能在编译阶段确保类型正确性，避免运行时错误；方案二更适合快速适配现有代码，但需额外添加类型校验保障安全。

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