Angular: Having an array of extended objects - how to correctly use types?

I have a base class with multiple extensions looking like this:

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;
}


Each extension, e.g. OnePagerWidgetTypePicture, has its own component. In the template I loop through Widgets property of ProjectOnePagerDTO and pass each widget to its component. The component for OnePagerWidgetTypePicture looks like this

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


Now I am getting following error: Property 'ProjectLogo' is missing in type 'IOnePagerWidget' but required in type 'OnePagerWidgetTypePicture'.

What am I missing? Do I have to change the @Input type and cast it right inside of the component?

Continue reading...