Utilize Typescript to destructure values returned from a function that may be either void or an object

I've encountered a situation where I'm using a package that includes a function with this specific declaration:

const getList: (params?: ListRequestParams | undefined) => Promise<void | {
    items: any[];
    pageInfo: PageInfo;
}>

My attempt to destructure the returned value from calling this function looks like this:

const {items, pageInfo} = await getList(some_param);

However, this approach doesn't seem to work properly, possibly due to the inclusion of 'void' in the return type. Resorting to using a temporary variable does the job but feels inelegant.

const temp = await getList(some_params);

if(temp !== undefined)
{
  const { items, pageInfo } = temp;
}

I'm curious if there are better ways to handle destructuring in this scenario. Appreciate any insights or suggestions. Thank you.

Answer №1

It's true that we cannot destructure void/undefined, and this limitation actually serves a purpose: it ensures that we handle the scenario where void is returned. One way to approach this is by using a guard clause like if not undefined then ....

To streamline your code for the positive path without introducing temporary variables, you might consider leveraging the Maybe type available through the npm package, along with its map() method:

Maybe
  .ofNullable(await getList(some_params))
  .map(({ items, pageInfo }) => { /*...*/ });

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

Retrieving Identifiers with Typescript from an object

I'm a newcomer to Typescript and I'm looking to extract ids from an observable Here's the observable data: let myObj = [{ "id": 1, "text": "Mary" }, { "id": 2, "text": "Nancy" }, { "id": 3, "text": "Paul" }, { "id": 4, "tex ...

In the Angular Google Maps API, is it possible to update the attributes of <agm-marker> directly within the TypeScript code?

Currently, I am fetching markers from the database and displaying them on a map using Angular Google Maps (AGM) by utilizing the <agm-marker> tag. In my code snippet below, you can see how I fetch and store the markers in an array named markers in t ...

Organize nested tuples and maintain their sequence

I am attempting to achieve a functionality similar to the following: type Type = object; type TypeTuple = readonly Type[]; function flattenTuples<T extends readonly (Type | TypeTuple)[], R = Flatten<T>>(...tuples: T): R { // code to flatten ...

What is the process for subscribing to setInterval() in an Angular application?

I'm currently working on developing an iOS location tracking application using the Ionic 5 Framework, Angular, and the Cordova Geolocation Plugin. In the past, I was able to track user location changes using the watchPosition() function, which worked ...

Using Typescript file for importing configurations instead of relying on json files dynamically

Let me give you some context: Our team is working on creating AWS CDK modules using Typescript (just so you know, I'm not very experienced in TS). One of the modules we're developing is for managing container-based applications that developers c ...

What kind of function possesses additional attributes or characteristics?

I am finding it difficult to define the type for the function foo as demonstrated below: function foo() { do something } foo.boo = () => { do something else } foo("hello"); foo.boo("hello"); This JavaScript code is functioning corr ...

typescript error: referencing a variable before assigning a value to it in function [2454]

I am currently in the process of creating a store using nextJS I have two variables that are being assigned values from my database through a function let size: Size let ribbonTable: Ribbon async function findSizeCategory(): Promise<v ...

The activation of [routerLinkActive] triggers an error related to the data.split function

In my lazy loaded module, I have implemented simple routing as shown below: <div id="nav"> <div class="nav-content"> <div class="nav-item" [routerLink]="'basic'" [routerLinkActive]="active-nav"> <span ...

Concealing a banner on a specific page

I am currently trying to hide a banner on a specific page. I have successfully hidden the banner on all pages except for one that has a unique ID. Additionally, I am working with a dynamic folder called [content]. import { useRouter } from "next/rou ...

Angular messaging service error TS2769: There is no overload that fits this call

Currently, I am attempting to utilize a messenger service to send products to the cart component. Within the 'Product' class, there are various product attributes stored. Although I managed to successfully log the product to the console in the ca ...

angular http fails to verify authorization header

My backend is set up in Node.js with Express and Sequelize. When I make a request to retrieve all my product types using Postman, everything works fine as shown in this image: postman http request and header However, when I try to make the same request f ...

Guard against an array that contains different data types

I am trying to create a guard that ensures each entry in an array of loaders, which can be either query or proxy, is in the "success" state. Here is my attempted solution: type LoadedQueryResult = Extract<UseQueryResult, { status: 'success' }& ...

Creating subclass mappings and defining subclasses dynamically using Typescript at runtime

I am puzzled by the structure of 3 classes: A, B, and C. Both B and C extend the abstract class A. abstract class A { public name: string; constructor(name: string) { this.name = name; } abstract getName(): string; } class B extends A { g ...

Angular5 - Modify a public variable using an intercept in a static service

Take into account the following Angular service: @Injectable() export class AuthService { public userConnected: UserManageInfo; getManageInfo(): Observable<UserManageInfo> { return this.httpClient .get('api/Account/Man ...

The culprit behind Angular 11 app error: Unidentified router outlet triggering 'No routes match' issue

In my Angular 11 application, I am utilizing a named router-outlet. The setup in my app.component.html file looks like this: <ng-container *ngIf="showGeneric"> <router-outlet name="general"> </router-o ...

What is the best way to retrieve the value of an input field in React when incorporating Material UI components?

I am working with a few radio input components that have been imported from material Ui react. Each radio input is wrapped in a FormControlLabel component. <FormControlLabel onClick={checkAnswerHandler} value={answer} control={<Radio color=&quo ...

Issue with TypeScript: Error appears when importing express after running "npm i @types/express -D"

Struggling with adding the following line of code in an index.ts file: import express, { Application } from 'express'; Initially encountered an error with "from 'express'", so I ran npm i @types/express -D which fixed that is ...

Give the Row ID as a parameter to a personalized component within MUI Datagrid Pro

I am currently exploring the idea of incorporating an intermediate state to row checkboxes based on the selection status of other checkboxes within a detailed panel. My approach involves crafting a custom checkbox component and implementing some logical ...

Tips for correctly setting object initial values in React CreateContext

How can I correctly define the initial value of the constance trainsDetails in React Create Context? The trainsDetails is an object with various properties, fetched as a single object from an endpoint and has the values specified below in the TrainsDetails ...

How can I retrieve a property from an interface in TypeScript?

Recently diving into Typescript, I am looking to access the isProd property through myStackObj. Specifically as myStackObj.isProd. interface MyStackProps { readonly isProd? : boolean; } class MyStack { constructor(props?: MyStackProps){ } } le ...