How to conditionally change the type in typescript in angular?

I am making an angular component dependent on the API Response.
I am getting these from an API Response.

1. When there's no error

   Data : {
   Status: string;
   Data: number;
   }

2. When there's an Error I am getting this.

   Data : {
   Status: string;
   Error: string;
   Message: string;
   }

As we can see Status is common I tried implementing this.

interface ApiModel {
  Status: string;
}

interface DataModel extends ApiModel {
  Data: number;
}
interface ErrorModel extends ApiModel {
  ErrorCode: string;
  Message: string;
}

I am trying to use the typescript to give it my variable an option where it can be either one and then pass that type in it's response too.

I don't want to use optional type here hence I am facing these issues.

What I am expecting is,

if (typeof Response === DataModel){
Response: DataModel;
// Other code
}
else {
Response:ErrorModel;
// Other code
}

The API call here

getReminder(reminderId: number) {
    const API_URL = `${this.BASE_URL}users/${this.userId}/reminders/${reminderId}`;
    return this.httpClient.get<ErrorModel | DataModel>(API_URL, this.options).pipe(
      map((data: ErrorModel | DataModel) => {
        return data;
      })
    );
  }

To my eyes your model looks like Discriminated union

If you model it correctly, the compiler will be able to do the narrowing without extra code.
Note that:

• there is no need to downcast after the type predicate check
• discriminator checks one of two union members - if it is not DataModel, the compiler can deduce that it is an ErrorModel

interface DataModel {
  Status: 'success';
  Data: number;
}

interface ErrorModel {
  Status: 'error'
  ErrorCode: string;
  Message: string;
}

type ApiModel = DataModel | ErrorModel;

function foo(responseData: ApiModel): void {
  if (responseData.Status === 'success') {
    console.log(responseData.Data);
  } else {
    console.log(responseData.ErrorCode);
  }
}

foo({Status: 'success', Data: 10});

If you cannot model your data as a discriminated union, you still model the response as a union, but you will have to resort to a [Type predicate] to verify which member of the union you are dealing with

interface ApiModelBase {
  Status: string;
}

interface DataModel extends ApiModelBase {
  Data: number;
}
interface ErrorModel extends ApiModelBase {
  ErrorCode: string;
  Message: string;
}

type ApiModel = DataModel | ErrorModel;


function isDataModel(response: ApiModel): response is DataModel {
  return (response as DataModel).Data !== undefined;
}

function foo(responseData: ApiModel): void {
  if (isDataModel(responseData)) {
    console.log(responseData.Data);
  } else {
    console.log(responseData.ErrorCode);
  }
}

foo({Status: 's1', Data: 10});

TS Playground

You could use this pattern to test what type you are receiving with some inline type conversion:

function isDataModel(response: ApiModel): response is DataModel {
  return (response as DataModel).Data !== undefined;
}

// when `responseData` is the actual response received from the API
const responseData: ApiModel = ...;

if (isDataModel(responseData)) {
  // The response is of type DataModel
  const dataResponse: DataModel = responseData;
  // Other code for DataModel
} else {
  // The response is of type ErrorModel
  const errorResponse: ErrorModel = responseData;
  // Other code for ErrorModel
}

Did you try using Union type in TypeScript to achieve what you want?

type YourResponse = DataModel | ErrorModel;

This could be the example usage:

const response: YourResponse = {
  Status: "Success",
  Data: 100,
};

if (response instanceof DataModel) {
  It is a DataModel.
} else if (response instanceof ErrorModel) {
  It is an ErrorModel.
}

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

isDataModel(response: ApiModel): response is DataModel {
  return response.Status === 'success';
}

getReminder(reminderId: number): Observable<DataModel | ErrorModel> {
  const API_URL = `${this.BASE_URL}users/${this.userId}/reminders/${reminderId}`;
  return this.httpClient.get<ApiModel>(API_URL, this.options).pipe(
    map((response: ApiModel) => {
      if (isDataModel(response)) {
        const responseData: DataModel = response as DataModel;
        return responseData;
      } else {
        // ErrorModel handling
        const errorResponse: ErrorModel = response as ErrorModel;
        throw errorResponse;
      }
    })
  );
}

Interfaces can be as earlier

interface ApiModel {
  Status: string;
}

interface DataModel extends ApiModel {
  Data: number;
}

interface ErrorModel extends ApiModel {
  ErrorCode: string;
  Message: string;
}

Let me know if there are any issues or clarifications needed.