typescript class with a union type

Question

typescript class with a union type

Currently, I am in the process of learning ionic and angular. Within this application, I have implemented the following classes:

model.ts

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
  ) {}
}

types.ts

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>

While working in VS Code, I encountered an error stating:

Identifier 'userName' is not defined. 'ReactionObject | ObituaryObject' does not contain such a member

. Despite this error, the data is displayed correctly, and the only available options in IntelliSense are categoryId and obituaryId, which are common to both classes. The error is resolved by replacing ObituaryObject with any.

Does anyone have an idea as to why this error is occurring?

Thank you!

angular typescript ionic-framework

Answer 1

Answer №1

It seems that the issue lies in the structure of your Feed class where the object field has two different types implemented using the concept of Union Type. Unfortunately, the ObituaryObject does not include the field userName.

To address this, I would recommend refraining from using the UnionType and instead opting for a parent object approach leveraging TypeScript inheritance.

This adjustment will not only enhance the clarity of your code but also streamline the structure.

Access the complete solution HERE.

Model / View / Component

Your updated model will look like this:

export class GenObject {
  constructor(
    public obituaryId: number,
    public categoryId: string
  ) {
  }
}

export class Feed {
  constructor(
    public type: string,
    public object: GenObject
  ) {
  }
}

export class ReactionObject extends GenObject {
  constructor(
    public actionId: string,
    public userName: string,
    public obituaryId: number,
    public categoryId: string
  ) {
    super(obituaryId, categoryId);
  }
}

export class ObituaryObject extends GenObject {
  constructor(
    public deathDay: string,
    public name: string,
    public obituaryId: number,
    public categoryId: string
  ) {
    super(obituaryId, categoryId);
  }
}

When accessing the field in the view, ensure to explicitly check the specific class like so:

 {{ getReaction(obituaryObject.object).username }}

You can define the method as follows:

getReaction(object: GenObject) {
   if (object instanceof ReactionObject) {
     return object as ReactionObject;
   }
 }

Answer 2

It seems that the issue lies in the structure of your Feed class where the object field has two different types implemented using the concept of Union Type. Unfortunately, the ObituaryObject does not include the field userName.

To address this, I would recommend refraining from using the UnionType and instead opting for a parent object approach leveraging TypeScript inheritance.

This adjustment will not only enhance the clarity of your code but also streamline the structure.

Access the complete solution HERE.

Model / View / Component

Your updated model will look like this:

export class GenObject {
  constructor(
    public obituaryId: number,
    public categoryId: string
  ) {
  }
}

export class Feed {
  constructor(
    public type: string,
    public object: GenObject
  ) {
  }
}

export class ReactionObject extends GenObject {
  constructor(
    public actionId: string,
    public userName: string,
    public obituaryId: number,
    public categoryId: string
  ) {
    super(obituaryId, categoryId);
  }
}

export class ObituaryObject extends GenObject {
  constructor(
    public deathDay: string,
    public name: string,
    public obituaryId: number,
    public categoryId: string
  ) {
    super(obituaryId, categoryId);
  }
}

When accessing the field in the view, ensure to explicitly check the specific class like so:

 {{ getReaction(obituaryObject.object).username }}

You can define the method as follows:

getReaction(object: GenObject) {
   if (object instanceof ReactionObject) {
     return object as ReactionObject;
   }
 }

Answer 3

Answer №2

declaring object as either of ReactionObject or ObituaryObject

this specifies that the object can be of type ReactionObject or ObituaryObject

 {{ feed.object.userName }} // issue identified here

Modify to:

  {{ (feed.object as ReactionObject).userName }} // issue should be fixed.

or

  {{ (<ReactionObject>feed.object).userName }} // issue should be resolved.

Don't forget to import ReactionObject in `updates.component.ts

import { ReactionObject } from './model.ts'  // double check the path for model.ts

Update:

In updates.components.ts, introduced a getter function

get feedObjectUserName() { 
  return ( <RectionObject> feed.object).userName
}

and in updates.component.html, made the following change

{{ feedObjectUserName }}

Wishing you success with this solution!

Answer 4

declaring object as either of ReactionObject or ObituaryObject

this specifies that the object can be of type ReactionObject or ObituaryObject

 {{ feed.object.userName }} // issue identified here

Modify to:

  {{ (feed.object as ReactionObject).userName }} // issue should be fixed.

or

  {{ (<ReactionObject>feed.object).userName }} // issue should be resolved.

Don't forget to import ReactionObject in `updates.component.ts

import { ReactionObject } from './model.ts'  // double check the path for model.ts

Update:

In updates.components.ts, introduced a getter function

get feedObjectUserName() { 
  return ( <RectionObject> feed.object).userName
}

and in updates.component.html, made the following change

{{ feedObjectUserName }}

Wishing you success with this solution!

typescript class with a union type

Answer №1

Access the complete solution HERE.

Model / View / Component

Answer №2

Similar questions

The MatInput value will only display after the page is reloaded or refreshed

The function Array.foreach is not available for type any[]

Looking to split the month and year input boxes when utilizing stripe version 7.2.0

Issues arise when attempting to construct an angular docker image

Retail Shop versus Requesting Services While Out and About

Angular2 and ReactiveX: Innovative Pagination Strategies

In Typescript, an index signature parameter can only be of type 'string' or 'number'

Encountering issues while attempting to upload items to AWS S3 bucket through NodeJS, receiving an Access Denied error 403

Can a type name be converted into a string representation for use as a template literal type?

No declaration file was located for the module '@handsontable/react' despite the presence of a 'd.ts' file

A Unique Identifier in Kotlin

Filter the output from a function that has the ability to produce a Promise returning a boolean value or a

Is there a way to integrate TypeScript into the CDN version of Vue?

Enhance your Angular application with lazy loading and nested children components using named outlets

How can you create a unique record by appending a number in Javascript?

Optimizing my AngularJS bundle is pushing me towards upgrading to Angular 5

observe the file currently residing on the server

Tips for evaluating a scrollTop occurrence using Jest in Angular 8

The TypeScript error message states that a value of 'undefined' cannot be assigned to a type that expects either a boolean, Connection

Developing React component libraries with TypeScript compared to Babel compiler