What is the proper way to specify the type for the iterable response of Promise.all()?

Question

What is the proper way to specify the type for the iterable response of Promise.all()?

It's common knowledge that Promise.all will return settled promises in the same order of the requested iterable.

I'm currently grappling with how to correctly define types for individual settled resolves. I am utilizing Axios for handling asynchronous calls.

Promise.all([
   <void, A>call an API a with response type A,
   <void, B>call another API b with response type B,
   <void, C>call another API c with response type C
]).then(([
       Response aa of type A: ?,
       Response bb of type B: ?,
       Response cc of type C: ?
   ]) => {
});

All responses are of type AxiosResponse<A | B | C>. However, explicitly setting it to this may cause problems when trying to access a property that doesn't exist in all response types, leading to errors like bb.test.

Is it possible to specify the type of each individual response like this?

]).then(([
       Response aa of type A: AxiosResponse<A>,
       Response bb of type B: AxiosResponse<B>,
       Response cc of type C: AxiosResponse<C>
   ]) => {

Note: The compiler is handling the types implicitly as well.

typescript asynchronous axios promise

Answer 1

Answer №1

If you define the array as a literal, as seen in your question, it will function properly. Bergi's observation in the comments highlights that Promise.all is indicated to accept a tuple type.

declare var a: Promise<A>;
declare var b: Promise<B>;
declare var c: Promise<C>;

Promise.all([a, b, c]).then(([a1, b1, c1]) => {
  (a1);
  //^? (parameter) a1: A
  (b1);
  //^? (parameter) b1: B
  (c1);
  //^? (parameter) c1: C
});

Nevertheless, TypeScript will assume that when an array is declared, it will attempt to identify a "best common type" that aligns with all elements of the array. This can hinder your ability to destructure the array into specific types.

let array = [a, b, c];
//  ^? let array: (Promise<A> | Promise<B> | Promise<C>)[]

Promise.all(array).then(([a1, b1, c1]) => {
  (a1);
  //^? (parameter) a1: (A | B | C)
  (b1);
  //^? (parameter) b1: (A | B | C)
  (c1);
  //^? (parameter) c1: (A | B | C)
});

To maintain the types but still utilize an array, you must incorporate the const assertion as const to direct TypeScript to treat it as a tuple, similar to what was done in the initial example.

let tuple = [a, b, c] as const;
//  ^? let tuple: readonly [Promise<A>, Promise<B>, Promise<C>]

Promise.all(tuple).then(([a1, b1, c1]) => {
  (a1);
  //^? (parameter) a1: A
  (b1);
  //^? (parameter) b1: B
  (c1);
  //^? (parameter) c1: C
});

Refer to the TypeScript playground for the given examples.

Answer 2

If you define the array as a literal, as seen in your question, it will function properly. Bergi's observation in the comments highlights that Promise.all is indicated to accept a tuple type.

declare var a: Promise<A>;
declare var b: Promise<B>;
declare var c: Promise<C>;

Promise.all([a, b, c]).then(([a1, b1, c1]) => {
  (a1);
  //^? (parameter) a1: A
  (b1);
  //^? (parameter) b1: B
  (c1);
  //^? (parameter) c1: C
});

Nevertheless, TypeScript will assume that when an array is declared, it will attempt to identify a "best common type" that aligns with all elements of the array. This can hinder your ability to destructure the array into specific types.

let array = [a, b, c];
//  ^? let array: (Promise<A> | Promise<B> | Promise<C>)[]

Promise.all(array).then(([a1, b1, c1]) => {
  (a1);
  //^? (parameter) a1: (A | B | C)
  (b1);
  //^? (parameter) b1: (A | B | C)
  (c1);
  //^? (parameter) c1: (A | B | C)
});

To maintain the types but still utilize an array, you must incorporate the const assertion as const to direct TypeScript to treat it as a tuple, similar to what was done in the initial example.

let tuple = [a, b, c] as const;
//  ^? let tuple: readonly [Promise<A>, Promise<B>, Promise<C>]

Promise.all(tuple).then(([a1, b1, c1]) => {
  (a1);
  //^? (parameter) a1: A
  (b1);
  //^? (parameter) b1: B
  (c1);
  //^? (parameter) c1: C
});

Refer to the TypeScript playground for the given examples.

What is the proper way to specify the type for the iterable response of Promise.all()?

Answer №1

Similar questions

What is the method for displaying script commands within package.json files?

Sporadic UnhandledPromiseRejectionWarning surfacing while utilizing sinon

Difficulty with retrieving and displaying extensive datasets in Vue/Nuxt leading to reduced speed

Is it possible to compile using Angular sources while in Ivy's partial compilation mode?

How to update an Angular 2 component using a shared service

Unraveling the complexities of Typescript's Advanced Type NonFunctionPropertyNames

`The Importance of Validating Enum Arrays in Typescript Using Class-Validator`

Tips on how to retrieve an Observable Array instead of a subscription?

Set up a unique database in memory for every individual test

Issue with importing Typescript and Jquery - $ function not recognized

Tips for specifying the return type of app.mount()

"Error: The React TypeScript variable has been declared but remains

Access network path through browser using Angular

The custom component is not updating the NgIf directive in HTML even though it receives a boolean variable

Testing Angular HTTP error handlers: A comprehensive guide

Sharing code between a node.js server and browser with Typescript: A step-by-step guide

Challenges with importing and using jspdf and autotable-jspdf in Angular 8

Capture all HTTP requests made by Angular2

Preventing CORS Block with Vuex and Axios to Access-control-allow-origin

Angular integration problem with aws-amplify when signing up with Google account