Início / coding / Perguntas / 79439086
Accepted
himtim
Asked: 2025-02-14 18:39:05 +0800 CST

Angular: Ter um array de objetos estendidos - como usar tipos corretamente?

  • 772

Tenho uma classe base com várias extensões parecidas com esta:

export interface ProjectOnePagerDTO {
  Widgets: IOnePagerWidget[];
  Id: string;
}

export interface IOnePagerWidget extends GridsterItem {
  Type: OnePagerWidgetType;
}

export interface OnePagerWidgetTypePicture extends IOnePagerWidget {
  ProjectLogo: string;
}

export interface OnePagerWidgetTypeProjectDescription extends IOnePagerWidget {
  Text: string;
}

Cada extensão, por exemplo, OnePagerWidgetTypePicture, tem seu próprio componente. No modelo, eu faço um loop pela propriedade Widgets do ProjectOnePagerDTO e passo cada widget para seu componente. O componente para OnePagerWidgetTypePicture se parece com isso

export class OpwProjectPictureComponent {
  @Input() widget: OnePagerWidgetTypePicture;
}

Agora estou recebendo o seguinte erro: Property 'ProjectLogo' is missing in type 'IOnePagerWidget' but required in type 'OnePagerWidgetTypePicture'.

O que estou esquecendo? Tenho que mudar o tipo @Input e fazer cast dentro do componente?

angular

1 respostas

  1. Best Answer

    Método 1:

    Tente usar Genéricos para que ele aceite vários tipos.

    @Component({
  selector: 'app-child',
  template: ``,
})
export class Child<T> {
  @Input() widget!: T;
}

    Método 2:

    Tente usar uma função que determina o tipo com base nas propriedades exclusivas desse tipo.

    typeIt(widget: CompositeWidgetType) {
  if ((widget as OnePagerWidgetTypePicture).ProjectLogo) {
    return widget as OnePagerWidgetTypePicture;
  } else if ((widget as OnePagerWidgetTypeProjectDescription).Type) {
    return widget as OnePagerWidgetTypeProjectDescription;
  } else {
    return widget as IOnePagerWidget;
  }
}

    Código completo:

    import { Component, Input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

export class GridsterItem {}

export class OnePagerWidgetType {}

export interface ProjectOnePagerDTO {
  Widgets: IOnePagerWidget[];
  Id: string;
}

export interface IOnePagerWidget extends GridsterItem {
  Type: OnePagerWidgetType;
}

export interface OnePagerWidgetTypePicture extends IOnePagerWidget {
  ProjectLogo: string;
}

export interface OnePagerWidgetTypeProjectDescription extends IOnePagerWidget {
  Text: string;
}

  @Component({
    selector: 'app-child',
    template: ``,
  })
  export class Child<OnePagerWidgetTypePicture> {
    @Input() widget!: OnePagerWidgetTypePicture;
  }

export type CompositeWidgetType =
  | IOnePagerWidget
  | OnePagerWidgetTypePicture
  | OnePagerWidgetTypeProjectDescription;

@Component({
  selector: 'app-root',
  imports: [Child],
  template: `
    @for (widget of Widgets;track $index) {
      @let typedWidget = typeIt(widget);
      <app-child [widget]="typedWidget"/>
    }
  `,
})
export class App {
  Widgets!: Array<CompositeWidgetType>;

  typeIt(widget: CompositeWidgetType) {
    if ((widget as OnePagerWidgetTypePicture).ProjectLogo) {
      return widget as OnePagerWidgetTypePicture;
    } else if ((widget as OnePagerWidgetTypeProjectDescription).Type) {
      return widget as OnePagerWidgetTypeProjectDescription;
    } else {
      return widget as IOnePagerWidget;
    }
  }
}

bootstrapApplication(App);

    Demonstração do Stackblitz

    Método 3:

    Se o componente pai contiver um dos três valores, a matriz não deveria especificar o mesmo?

    Aqui podemos especificar um typenome CompositeWidgetTypee atribuí-lo ao array.

    export type CompositeWidgetType = IOnePagerWidget | OnePagerWidgetTypePicture | OnePagerWidgetTypeProjectDescription;

export interface ProjectOnePagerDTO {
  Widgets: Array<CompositeWidgetType>;
  Id: string;
}

    Agora, quando você passar para o componente filho, ele assumirá o tipo respectivo, já que o tipo pode ser qualquer um dos três tipos.

    • 1

relate perguntas