Asserting types for promises with more than one possible return value

Question

Asserting types for promises with more than one possible return value

Struggling with type assertions when dealing with multiple promise return types? Check out this simplified code snippet:

interface SimpleResponseType {
   key1: string
};

interface SimpleResponseType2 {
   property1: string
   property2: number 
};

interface ServiceType {
   fetchResponse: () => Promise<SimpleResponseType | SimpleResponseType2> 
};

class Service implements ServiceType {
   async fetchResponse() {
      // fetching api data and returning json here
      return { key1: 'json' };
   };
};

const service = new Service();

await service.fetchResponse().then(resp => {
   // Expecting typeof SimpleResponseType
   console.log(resp.key1)
})

An error is thrown by TypeScript on the last key1 line:

Property 'key1' does not exist on type 'SimpleResponseType2'.ts(2339)

Attempting to assert the type results in more errors. For instance, trying this assertion:

await service.fetchResponse().then((resp as SimpleResponseType) => {

Leads to this error:

Argument of type 'SimpleResponseType' is not assignable to parameter of type '(value: SimpleResponseType | SimpleResponseType2) => SimpleResponseType | SimpleResponseType2 | PromiseLike<...>'.
Type 'SimpleResponseType' provides no match for the signature '(value: SimpleResponseType | SimpleResponseType2): SimpleResponseType | SimpleResponseType2

The only working assertion found is:

const respTyped = resp as SimpleResponseType

Using respTyped instead of resp.

Perhaps there's a more effective approach to tackle this issue?

javascript typescript promise

Answer 1

Answer №1

Uncertainty surrounds your desired outcome, but it seems like you're striving to achieve a specific objective. It involves strongly typing your Service type for precise response handling.

interface SimpleResponseType {
   key1: string
};

interface SimpleResponseType2 {
   property1: string
   property2: number 
};

interface ServiceType<T extends SimpleResponseType | SimpleResponseType2> {
   fetchResponse: () => Promise<T> 
};

class Service implements ServiceType<SimpleResponseType> {
   async fetchResponse() {
      // code here to get API data and return JSON
      // returning a sample response 
      return { key1: 'json' };
   };
};

const service = new Service();
export {}
await service.fetchResponse().then(resp => {
   // Expecting the type of response to be SimpleResponseType
   console.log(resp.key1)
})

Answer 2

Uncertainty surrounds your desired outcome, but it seems like you're striving to achieve a specific objective. It involves strongly typing your Service type for precise response handling.

interface SimpleResponseType {
   key1: string
};

interface SimpleResponseType2 {
   property1: string
   property2: number 
};

interface ServiceType<T extends SimpleResponseType | SimpleResponseType2> {
   fetchResponse: () => Promise<T> 
};

class Service implements ServiceType<SimpleResponseType> {
   async fetchResponse() {
      // code here to get API data and return JSON
      // returning a sample response 
      return { key1: 'json' };
   };
};

const service = new Service();
export {}
await service.fetchResponse().then(resp => {
   // Expecting the type of response to be SimpleResponseType
   console.log(resp.key1)
})

Answer 3

Answer №2

If you're considering handling different return types for the same function, you might want to explore using overloads. However, be prepared to define unique input parameters for each overload. It's unusual to have multiple return types for a single API/function call unless there are specific reasons in your scenario.

Alternatively: Here's a suggested approach if you aim to utilize the same function across diverse API routes.

Check out TS playground for implementation

interface SimpleResponseType {
   key1: string
};
interface SimpleResponseType2 {
   property1: string
   property2: number 
};
type SimpleResponseType3 = Array<SimpleResponseType2>;

enum Routes {
    Route1 = "/api/route1",
    Route2 = "/api/route2",
    RouteWParam = "/api/route2/:id"
}

class Service {

    async fetchResponse(route: Routes.Route1) : Promise<SimpleResponseType>;
    async fetchResponse(route: Routes.Route2) : Promise<SimpleResponseType2>;
    async fetchResponse(route: Routes.RouteWParam, params: { id: number }) : Promise<SimpleResponseType3>;
    async fetchResponse(route: Routes, params?: Record<string, string | number>) {
        let url : string = route;
        if (params !== undefined) {
            //replace all params with the params passed
            url = Object.entries(params).reduce((previousValue: string, [param, value]) => {
                return previousValue.replace(`:${param}`, '' + value)
            }, route);
        }
        // You do lose type-safety inside this function. TS doesn't care if route is `Route1` and you try to return `SimpleResponseType2`.
        // That's up to you to make sure.
        const data = { key1: 'sdf' }
        const data2 = { property1: 'val', property2: 345 };
        
        return new Promise((res) => {
            setTimeout(() => res(data2), 100)
        })
    };
};

Answer 4

If you're considering handling different return types for the same function, you might want to explore using overloads. However, be prepared to define unique input parameters for each overload. It's unusual to have multiple return types for a single API/function call unless there are specific reasons in your scenario.

Alternatively: Here's a suggested approach if you aim to utilize the same function across diverse API routes.

Check out TS playground for implementation

interface SimpleResponseType {
   key1: string
};
interface SimpleResponseType2 {
   property1: string
   property2: number 
};
type SimpleResponseType3 = Array<SimpleResponseType2>;

enum Routes {
    Route1 = "/api/route1",
    Route2 = "/api/route2",
    RouteWParam = "/api/route2/:id"
}

class Service {

    async fetchResponse(route: Routes.Route1) : Promise<SimpleResponseType>;
    async fetchResponse(route: Routes.Route2) : Promise<SimpleResponseType2>;
    async fetchResponse(route: Routes.RouteWParam, params: { id: number }) : Promise<SimpleResponseType3>;
    async fetchResponse(route: Routes, params?: Record<string, string | number>) {
        let url : string = route;
        if (params !== undefined) {
            //replace all params with the params passed
            url = Object.entries(params).reduce((previousValue: string, [param, value]) => {
                return previousValue.replace(`:${param}`, '' + value)
            }, route);
        }
        // You do lose type-safety inside this function. TS doesn't care if route is `Route1` and you try to return `SimpleResponseType2`.
        // That's up to you to make sure.
        const data = { key1: 'sdf' }
        const data2 = { property1: 'val', property2: 345 };
        
        return new Promise((res) => {
            setTimeout(() => res(data2), 100)
        })
    };
};

Answer 5

Answer №3

const data = { name1: 'apple' };

It seems like you're attempting something unusual. What if you try this instead:

const data = { name1 - 'apple' };

Answer 6

const data = { name1: 'apple' };

It seems like you're attempting something unusual. What if you try this instead:

const data = { name1 - 'apple' };

Asserting types for promises with more than one possible return value

Answer №1

Answer №2

Answer №3

Similar questions

Why is it that in React the render method is automatically bound to the component instance, while custom methods are not provided

Troubleshooting ng-repeat in AngularJS: Multi checkbox filter malfunction

The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

Is it possible to modify the appearance or behavior of a button in a React application based on its current state?

Are there any instances of a race condition present in the following?

React components can be used to dynamically render and display an array of objects through methods like reduce and

The output from the Angular .then function is not showing up on the webpage

Challenges encountered with input outcomes

retrieve information at varying intervals through ajax

The data received from the frontend is being replicated in the backend, causing duplication issues in a React

What is the function of '@' symbol in coding?... obtain {ModuleName} from '@ModuleName'

Unable to dispatch actions within the mounted lifecycle hook in Vuex?

Revolutionizing Form Select Field: Introducing Rails' Dynamic Input Rendering

Methods for bypassing a constructor in programming

What is the correct way to securely send the username and password from a ReactJS frontend to the backend for authentication?

Is there a Google Maps feature that displays clusters in a dropdown

Is there a way to have a span update its color upon clicking a link?

Error in Browserify Express App: Unexpected token while parsing the file

The Art of Validating Configurations Using io-ts

How can I use JQuery to enable or disable checkboxes upon loading?