类中的打字稿联合

我正在学习离子和角质。在此应用中，我正在使用以下课程

模型

export class Feed {
  constructor(
    public type: string,
    public object: ReactionObject | ObituaryObject
  ) {}
}
export class ReactionObject {
  constructor(
    public actionId: string,
    public obituaryId: string,
    public categoryId: string,
    public timestamp: string,
    public userName: string,
    public userPhoto: string,
    public deceasedName: string,
    public thanked: string,
    public community: CommunityObject,
    public obituarySponsorId: string
  ) {}
}

export class ObituaryObject {
  constructor(
    public categoryId: string,
    public deathDay: string,
    public funeral: FuneralObject,
    public name: string,
    public obituaryId: number,
    public photo: string
  ) {}
}

类型

export interface ApiData {
  error: string;
  session_id: string;
  data: any;
  message?: string;
}
export interface FeedData extends ApiData {
  type: string;
  object: ReactionData | SingleObituaryData;
}
export interface ReactionData extends ApiData {
  actionId: string;
  obituaryId: string;
  categoryId: string;
  timestamp: string;
  userName: string;
  userPhoto: string;
  deceasedName: string;
  thanked: string;
  community: CommunityData;
  obituarySponsorId: string;
}
export interface SingleObituaryData extends ApiData {
  categoryId: string;
  deathDay: string;
  funeral: FuneralData;
  name: string;
  obituaryId: number;
  photo: string;
}

feed.service.ts

export class FeedService {
  private _feed = new BehaviorSubject<Feed[]>([]);

  get feed() {
    return this._feed.asObservable();
  }

  constructor(private authService: AuthService, private http: HttpClient) {}

  getFeed(pageNumber: number) {
    return this.authService.userToken.pipe(
      take(1),
      switchMap((token) => {
        return this.http.get<FeedData>(
          `${environment.apiURL}getFeed&token=${token}&page=${pageNumber}`
        );
      }),
      map((resData) => {
        resData = resData.data.items;
        console.log(resData);
        const feed = [];
        for (const key in resData) {
          if (resData.hasOwnProperty(key)) {
            feed.push(
              new Feed(
                resData[key].type,
                new ReactionObject(
                  resData[key].object.actionId,
                  resData[key].object.obituaryId,
                  resData[key].object.categoryId,
                  resData[key].object.timestamp,
                  resData[key].object.userName,
                  resData[key].object.userPhoto,
                  resData[key].object.deceasedName,
                  resData[key].object.thanked,
                  resData[key].object.community,
                  resData[key].object.obituarySponsorId,
                )
              )
            );
          }
        }
        return feed;
      }),
      tap((feed) => {
        this._feed.next(feed);
      })
    );
  }
}

updates.component.html

<p class="ion-text-center" *ngIf="!isLoading && loadedFeed.length <= 0">
  No updates found
</p>

<ion-list *ngIf="isLoading" class="ion-no-padding">
  <ion-item *ngFor="let i of Arr(num).fill(1)">
    <ion-avatar slot="start">
      <ion-skeleton-text animated></ion-skeleton-text>
    </ion-avatar>
    <ion-label>
      <p>
        <ion-skeleton-text animated style="width: 80%;"></ion-skeleton-text>
      </p>
    </ion-label>
  </ion-item>
</ion-list>

<ion-list *ngIf="!isLoading && loadedFeed.length > 0" class="ion-no-padding">
  <ion-item *ngFor="let feed of loadedFeed">
    <ng-container
      *ngIf="
        feed.type === 'candle' ||
        feed.type === 'flower' ||
        feed.type === 'comment'
      "
    >
      <ion-avatar slot="start">
        <img src="../../../assets/img/{{ feed.type }}-icon.svg" />
      </ion-avatar>
      <ion-label>
        {{ feed.object.userName }} // issue here
        <ng-container *ngIf="feed.type === 'candle'">
          lit a candle on
        </ng-container>
        <ng-container *ngIf="feed.type === 'flower'">
          placed a flower on
        </ng-container>
        <ng-container *ngIf="feed.type === 'comment'">
          wrote a message on
        </ng-container>
      </ion-label>
    </ng-container>
  </ion-item>
</ion-list>

i'm getting an error from VS code: Identifier 'userName' is not defined. 'ReactionObject | ObituaryObject' does not contain such a member However this still does display the data correctly, also the IntelliSense shows only two options: categoryId & obituaryId which are common to both classes. Replacing ObituaryObject with any clears the error

任何想法，为什么我会收到此错误？

谢谢