CODEWITHSUNDEEP
angulartypescriptrxjsobservable
Rishav Tandon
Rishav Tandon

Reputation: 115

Define Interface for observable

I have a function in an angular component.ts file like

createOrUpdateAlertingProfile() {

**let request: Observable<any>;**
let successMessage: string;

if (!this.alertingProfile) {
  const slackConfigurationIdvalue = this.createOrEditAlertingProfileForm.get('slackConfigurationId').value;
  const organizationIdvalue = this.createOrEditAlertingProfileForm.get('organizationId').value;
  const remiderValue = this.createOrEditAlertingProfileForm.get('reminder').value;
  const newAlertingProfileValue: AlertingProfileCreation = {
    ...this.createOrEditAlertingProfileForm.value,
    slackConfigurationId: slackConfigurationIdvalue === '' ? undefined : slackConfigurationIdvalue,
    organizationId: organizationIdvalue === '' ? undefined : organizationIdvalue,
    reminder: remiderValue === '' ? undefined : remiderValue,
    emails: this.emails.length === 0 ? undefined : this.emails.value,
    webhooks: this.webhooks.length === 0 ? undefined : this.webhooks.value,
  };
  request = this.alertingProfilesService.createAlertingProfile(newAlertingProfileValue);
  successMessage = 'New alerting profile was successfully added';
}

if (this.alertingProfile) {
  request = this.alertingProfilesService.updateAlertingProfile(this.createOrEditAlertingProfileForm.value);
  successMessage = `Alerting profile ${this.alertingProfile.name} was updated`;
}

request.subscribe(
  () => {
    this.alertify.success(successMessage);
    this.isLoading$.next(false);
    this.dialogRef.close(true);
  },
  (error) => {
    this.alertify.error('\n' + error);
    this.isLoading$.next(false);
  },
 );
}

the 'request' is of type observable

the request calls either of two services

createAlertingProfile(newAlertingProfile: AlertingProfileCreation) {
 return this.http.post(`${this.baseUrl}/create`, newAlertingProfile);
}

updateAlertingProfile(model: AlertingProfileUpdate) {
 return this.http.post(`${this.baseUrl}/edit`, model);
}

The two interfaces used 'AlertingProfileCreation' and 'AlertingProfileUpdate'

export interface AlertingProfileUpdate {
 name: string;
 slackConfigurationId: number;
 organizationId: number;
 reminder: number;}

export interface AlertingProfileCreation {
 name: string;
 slackConfigurationId: number;
 organizationId: number;
 emails: AlertingProfileEmail[];
 webhooks: Webhook[];
 reminder: number;}

My question is I want to define type for request observable and when I try

let request: Observable<AlertingProfileUpdate | AlertingProfileCreation>

It throws error, how can I define interface for Observable?

Upvotes: 0

Views: 111

Answers (1)

Antoniossss
Antoniossss

Reputation: 32535

You can use Observable<AlertingProfileUpdate> | Observable<AlertingProfileCreation> but keep in mind that you will be able to access only the crossesction of both interfaces (in typesafe manners speaking)

TS playground

Also, keep in mind that you should cast your http calls as well.

createAlertingProfile(newAlertingProfile: AlertingProfileCreation):Observable<ReturnTypeOfCreation> {
 return this.http.post<ReturnTypeOfCreation>(`${this.baseUrl}/create`, newAlertingProfile);
}

updateAlertingProfile(model: AlertingProfileUpdate):Observable<ReturnTypeOfUpdate> {
 return this.http.post<ReturnTypeOfUpdate>(`${this.baseUrl}/edit`, model);
}

Upvotes: 2

Related Questions