What is the recommended approach for returning two different types in a TypeScript function?

My API function currently performs a post request and returns an Observable of ModelAResponse, which is an interface I have defined.

I now want to modify this function so that it can return an Observable of either ModelAResponse or ModelBResponse based on the status returned.

Here are the two response models I am working with:

export interface ModelAResponse {
  res: ModelA;
}

export interface ModelBResponse {
  res: ModelB
}

(ModelA and ModelB are interfaces that belong to another class)

Currently, my function only supports returning ModelAResponse:

public myApiFunc(req: MyRequestModel): Observable<ModelAResponse> {
      ...
this.http.post("my/api/path", req, {headers: myHeaders}),
      (jsonReturned) => status === 200 ? {res: jsonReturned} : undefined);
      ...
}

I'm looking for the best practice way in TypeScript to modify this function so that it can return either ModelAResponse or ModelBResponse based on the status. How can I achieve this?

Answer №1

It's not possible to achieve this with Typescript. Typescript can only provide type checking based on static analysis during the build process, so determining the result of an API call at compile time is beyond its capabilities.

A workaround could be to specify that your API function can return either of the specified interfaces:

public myApiFunc(req: MyRequestModel): Observable<ModelAResponse | ModelBResponse>

However, you will still need to handle the determination of whether it is type "A" or type "B" at runtime.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing regex to locate words and spaces within a text?

I'm feeling so frustrated and lost right now. Any help you can offer would be greatly appreciated. I am currently dealing with an issue in Katex and Guppy keyboard. My goal is to create a regex that will identify the word matrix, locate the slash that ...

What could be causing this peculiar behavior in my React/TypeScript/MUI Dialog?

My React/TypeScript/MUI application has a dialog that displays multiple buttons. Each time a button is clicked, the dialog function adds the button value to a state array and removes it from the dialog. Although it seems to be working, there is an issue wh ...

Type of event triggered by user file upload via INPUT element

I have a piece of code that reads the contents of a locally stored file. Here is what it looks like: onFile(event: any) { console.log(event); const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = (ev: any) => { ...

Aggregate the values in an array and organize them into an object based on their frequency

I have an array of information structured like this: 0: { first: "sea", second: "deniz", languageId: "English-Turkish"} 1: { first: "play", second: "oynamak", languageId: "English-Turkish&qu ...

Tips for ensuring that functions can pass arguments with uniform overloads

I need to create a function that passes its arguments to another function, both with the same overloads. function original (a: number): boolean; function original (a: string, b: string): boolean; function original (a: number | string, b?: string): boolean ...

Is it possible to transform a ReadonlyArray<any> into a standard mutable array []?

At times, when working with Angular functions and callbacks, they may return a ReadonlyArray. However, I prefer using arrays in the traditional way and don't want to use immutable structures like those in Redux. So, what is the best way to convert a ...

Unlocking the Power of Dependent Types in TypeScript: Unveiling Type by Property Name Declaration

In an attempt to tie the types to the arguments passed, consider the following example: type NS = "num" | "str" type Data<T extends NS> = T extends "num" ? number : string type Func<T extends NS> = (x: Data<T> ...

Combining Closure Compiler with Typescript

My objective is to leverage Typescript along with Closure Compile (advanced compilation) to target ES5 and then minify the resulting output. Is it mandatory for me to replace tsc with tsickle? I find that tsickle does not provide support for all options a ...

Tips for handling numerous observables in Angular 7

I am working on an Angular 7 application that deals with a total of 20 sensor data. My goal is to receive data from a selected sensor every 5 seconds using observables. For example: var sensorId = ""; // dynamically chosen from the web interface var senso ...

Managing onChange in a ReactJs project

Currently, my React tsx page features input boxes like the following: <textarea value={this.state.myData!.valueOne} onChange={(e) => this.handleValueOneChange(e)}/> <textarea value={this.state.myData!.valueTwo} onChange={(e) => thi ...

The TypeScript error "Issue with Type Assertion: 'This expression is not callable Type'...' has no call signatures" occurs when there is a missing semicolon

Here's a simplified version of our original code: const start: number = 10 const end: number = 20 (someElement as HTMLInputElement).setSelectionRange(start, end) We encountered an error with the 20, where a red squiggly line appeared indicating ...

Oops! An error occurred: Uncaught promise rejection - invalid link found for ProductListComponent

I am currently in the process of learning Angular and Ionic, but I am feeling a bit confused as to where my mistake is. I have looked at other questions, but I still can't seem to figure it out. Can anyone provide some assistance? Perhaps someone has ...

One of the interfaces in use is malfunctioning, despite being identical to the other interface in TypeScript

I have been working on the IDocumentFilingDto.ts file. import { DocumentOrigin } from "./IDocumentFilingDto"; export interface IDocumentFilingDtoGen { UniqueId?: any; Title?: string; DocumentId?: string; Binder?: any; Communi ...

ngx-bootstrap - Not Triggering On Hide Event

Having trouble triggering a function in my Angular component when closing a modal from ngx-bootstrap. No matter what method I use, I can't seem to catch the event. The event I want to trigger is simple - just need to see it in the console for now: // ...

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Is there a way to either clear an HTML input field of a previous set number when onFocus is triggered or start with an empty field? When salary: null is set in the constructor, a warning appears on page load: Warning: The value prop on input should not ...

Sending a string value from an object to a component by clicking a button in Angular

Within the HTML template of my component 'a', there is a button designed to redirect to another component: <button nbButton status="info" class="left" [routerLink]="['/centers', center.id, 'prices']">PRICES</button&g ...

The error message "Type 'null' cannot be assigned to type 'Element | DocumentFragment'" occurs when using Nextjs/React createPortal

I am completely new to typescript. Currently, I'm working on a project that has a lot of pre-configured react components in JavaScript files (.js). My task now is to convert everything to TypeScript (.tsx) without triggering any ESLint errors. Unfort ...

Is it possible to enforce a certain set of parameters without including mandatory alias names?

My inquiry pertains to handling required parameters when an alias is satisfied, which may seem complex initially. To illustrate this concept, let's consider a practical scenario. If we refer to the Bing Maps API - REST documentation for "Common Param ...

Error in Typescript: Cannot assign type 'string[]' to type 'string'

I'm currently developing a project using Next.js with Typescript and .tsx files, and I'm utilizing Supabase as my database. While everything is functioning perfectly on localhost, I'm encountering an issue when trying to build the project o ...

Updating the state on change for an array of objects: A step-by-step guide

In my current scenario, I have a state variable defined as: const [budget, setBudget] = React.useState<{ name: string; budget: number | null }[]>(); My goal is to update this state by using a TextField based on the name and value of each input ...