angular - Typescript gir en feil når egenskapen p ikke finnes på typen til en av de to klassealternativene som er kombinert med OR

Jeg har en komponentklasse, der jeg har en klasseegenskap renderContent som kan være en av de to gitte type-klassene/modellene LessonPageType og TaskPageType basert på verdien jeg sendte som @Input(). Nedenfor er koden for klassekomponenten min:

import {ChangeDetectionStrategy, Component, HostListener, Input, OnInit} from '@angular/core';
import {LessonPageType, TaskPageType} from '../../models/types';

@Component({
  selector: 'app-page-renderer',
  templateUrl: './page-renderer.component.html'
})
export class PageRendererComponent implements OnInit {

  @Input() renderContent: LessonPageType | TaskPageType;
  @Input() submission: TaskSubmissionType;
}

Problem: -

Jeg får tilgang til renderContent-variabelobjektet i malen min som renderContent?.accept_answer. Denne accept_answer-nøkkelen er tilgjengelig i TaskPageType-klassen, men ikke i den andre, noe som fører til feilen nedenfor når applikasjonen bygges under AOT. Finnes det en løsning annet enn å gjøre typen til renderContent som any for at det skal fungere?

Feil:-

FEIL i src/app/shared/components/page-renderer/page-renderer.component.html(16,17): Egenskapen 'accepts_answer' eksisterer ikke på typen 'LessonPageType | TaskPageType'. Egenskapen 'accepts_answer' eksisterer ikke på typen 'LessonPageType'.

Svar #1

Hvis du erklærer en variabel som en OR av to eller flere grensesnitt/klasser, vil du bare kunne få tilgang til egenskapene som er felles mellom dem. Mulige løsninger jeg ville brukt:

• Definer en valgfri accept_answer-egenskap i LessonPageType
• Gjør LessonPageType til en utvidelse av TaskPageType slik at den vil ha alle egenskapene sine, pluss de tilpassede du legger til
• Det siste alternativet, erklær renderContent som any

Håper det hjelper,

Svar #2

Det avhenger av hva du vil vise i malen din hvis du har LessonPageType.

hvis det er en tom streng, kan du gjøre det på denne måten:

class PageRendererComponent implements OnInit {
  @Input() renderContent: LessonPageType | TaskPageType;
  @Input() submission: TaskSubmissionType;

  get acceptAnswer(): string {
    return 'accept_answer' in this.renderContent ? this.renderContent.accept_answer : '';
  }
}

og bruk acceptAnswer i malen din i stedet for renderContent?.accept_answer