Is there a way to get [valueOfTypeOne, ValueOfTypeTwo] instead of (valueOfTypeOne | ValueOfTypeTwo)[] for each resulting element in this scenario?
const [valueOfTypeOne, ValueOfTypeTwo] = await Promise.all(
[
fetchTypeOne(),
fetchTypeTwo(),
].map((promise) => promise.catch(() => null)),
);Utilizing the .map() function on a tuple will effectively transform the tuple into an array type, causing the loss of type information. For more details, refer to this link: https://github.com/microsoft/TypeScript/issues/6574
An approach to resolve this issue is to attach the catch method to each Promise.
const [valueOfTypeOne, ValueOfTypeTwo] = await Promise.all(
[
fetchTypeOne().catch(() => null),
fetchTypeTwo().catch(() => null),
],
);
An effective utility function is available to handle the mapping process and abstract the type of map operation:
function convertToNull<P extends Promise<any>[]>(...promises: P): { [K in keyof P]: Promise<Awaited<P[K]> | null> } {
return promises.map((p) => p.catch(() => null)) as never;
}
This function goes through each promise, unwraps it, and wraps it back with a value of null.
Usage example:
const [valueOfTypeOne, valueOfTypeTwo] = await Promise.all(
convertToNull(
fetchTypeOne(),
fetchTypeTwo(),
)
);
If dealing with an array of promises, simply spread them:
convertToNull(...arrayOfPromises);
If needed, specify the promise array as a tuple for typing purposes:
convertToNull<[Promise<number>]>(...onlyOnePromiseInThisArray);
For more details and testing this solution, visit here.
I have been experimenting with the mat-table component in my Angular project, following a simple example from the documentation: <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!--- These columns can be ...
Hi there, I have a complex question that I would like some help with. I've created a recursive Omit type in TypeScript. It takes a type T and a tuple of strings (referred to as a 'path'), then removes the last item on the path and returns t ...
Currently, I am working with lerna and everything runs smoothly locally. However, when I attempt to build the image and operate it through Docker, it does not function as expected. FROM node:16-alpine3.11 ENV NODE_ENV=production COPY . /app WORKDIR /app R ...
var data= [{tharea: "Rare Disease", value: 3405220}, {tharea: "Rare Disease", value: 1108620}, {tharea: "Rare Disease", value: 9964980}, {tharea: "Rare Disease", value: 3881360}, ...
As a newcomer to Angular, I am working with an array of events containing multiple arguments. My goal is to filter these events and separate them into two new arrays: upcoming events and past events. Below is a snippet of the TypeScript code I am using: a ...
I am aiming to differentiate the desktop and mobile pages. The rationale is that the user experience flow for the desktop page involves "scrolling to section", while for the mobile page it entails "navigating to the next section." The issue at hand: Desk ...
Imagine a scenario where a function is called in the following manner: func([ {object: object1, key: someKeyOfObject1}, {object: object2, key: someKeyOfObject2} ]) This function works with an array. The requirement is to ensure that the key field co ...
Upon attempting to launch the project post-cloning the repository from GitHub and installing dependencies using yarn install, I encountered an error. Updating react-scripts to the latest version and typescript to 4.1.2 did not resolve the issue. Node v: 1 ...
One issue I am encountering is that only the first tap works when clicked, and subsequent taps result in an error message: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') Here is the code I am using: https://codepen ...
Trying to utilize VS Code for assistance when typing an object with predefined types. An example of a dish object could be: { "id": "dish01", "title": "SALMON CRUNCH", "price": 120, ...
In my development setup, I work with two repositories known as web-common and A-frontend. Typically, I use npm link web-common from within A-frontend. Both repositories share various dependencies such as React, Typescript, Google Maps, MobX, etc. Up until ...
Our team utilizes TypeScript with both Atom and VSCode as our editors, but we are facing challenges with the tsconfig.json file. VSCode is not recognizing the typings, causing the namespace for 'ng' (for Angular 1.x) to be unknown in VSCode. Wh ...
In an attempt to enhance the convenience of my application class, I decided to create a Sub-class EntityServices based on the NGRX/data documentation which can be found here. Despite following the provided example, it appears that it does not function pro ...
I am trying to set the current date within a formGroup in a specific format, but I keep encountering an error with the code below: 'Unable to convert "13/07/2020" into a date' for pipe 'DatePipe' this.fb.group({ startdateActivi ...
Recently delving into the world of vue.js, I find myself puzzled by the unexpected behavior of the code snippet below: <template> <page-layout> <h1>Hello, Invoicer here</h1> <form class="invoicer-form"> ...
I am currently working on creating a basic example using ReactJS and TypeScript in Visual Studio 2015. Despite following several tutorials, none of them have met my specific requirements or worked as expected. My goal is to develop components as .tsx fil ...
I am facing a challenge where I need to display or hide an Input/Text field based on the state of a Checkbox. When the Checkbox is checked, I want to show the TextField, and when it is unchecked, I want to hide it. Below is the code snippet for this compon ...
interface User { id: number; name?: string; nickname?: string; } interface Info { id: number; city?: string; } type SuperUser = User & Info; let su: SuperUser; su.id = 1; console.log(su); I experimented with intersection types ...
Can Angular's i18next provider be configured to hide any value when the key is not defined? The issue arises when there is no translation defined for a specific key like my:key. I want to display an empty string in the template instead of showing the ...
I attempted to create a type definition for recurrent intersection, in order to achieve this specific behavior: type merged = Merged<[{a: string}, {b: string}, ...]> to end up with {a: string} & {b: string} & ... I came up with some type u ...