Create a new data structure in TypeScript that stores multiple values in a

Question

Create a new data structure in TypeScript that stores multiple values in a

For my TypeScript project, I came across a situation where I needed to utilize Promise.all(...) to handle an array of multiple items:

Promise.all(
  firstRequest,
  secondRequest,
  ...,
  nthRequest
)
.then((array : [FirstType, SecondType, ..., NthType]) => {
  // process the responses here
});

The type definition

[FirstType, SecondType, ..., NthType]

was too long to include in the same block, so I attempted to define it separately and refer to it at that point.

I tried the following approach:

export interface ResponseParams {
  [0]: FirstType;
  [1]: SecondType;
  ...
  [n]: NthType;
}

And then used it like this:

.then((array : ResponseParams) => {
  // process the responses here
});

However, I encountered the error message:

Type 'ResponseParams' is not an array type.

Is there a way to externalize the type declaration to improve the cleanliness of my code?

Appreciate any insights. Thank you!

typescript

Answer 1

Answer №1

To create a specific type, you can utilize a type alias:

type CustomType = [FirstType, SecondType, ..., NthType]

Keep in mind that the type of array can be automatically inferred without explicit annotation (for up to 10 promises):

declare let firstRequest: Promise<{a: number}>
declare let secondRequest: Promise<{b: number}>
declare let nthRequest: Promise<{c: number}>
Promise.all([
    firstRequest,
    secondRequest,
    nthRequest
])
.then((array) => { // array is determined as [{a: number;}, {b: number;}, {c: number;}]      
// perform actions with response
});

Answer 2

To create a specific type, you can utilize a type alias:

type CustomType = [FirstType, SecondType, ..., NthType]

Keep in mind that the type of array can be automatically inferred without explicit annotation (for up to 10 promises):

declare let firstRequest: Promise<{a: number}>
declare let secondRequest: Promise<{b: number}>
declare let nthRequest: Promise<{c: number}>
Promise.all([
    firstRequest,
    secondRequest,
    nthRequest
])
.then((array) => { // array is determined as [{a: number;}, {b: number;}, {c: number;}]      
// perform actions with response
});

Answer 3

Answer №2

When using Promise.all, you have the ability to define a generic T, allowing for precise control over the return type. This enables you to specify the expected tuple for each promise while still preserving type integrity.

If I were to implement this using async / await syntax:

interface Foo {
    gnarf: string;
}

interface Bar {
    poit: string;
}

const createFoo = async (): Promise<Foo> => {
    return {
        gnarf: "random",
    };
};

const createBar = async (): Promise<Bar> => {
    return {
        poit: "hurz",
    };
};

const doStuff = async () => {
    const [foo, bar] = await Promise.all<Foo, Bar>([createFoo(), createBar()]);

    return `${foo.gnarf} and ${bar.poit}`;
};

doStuff().then(console.log).catch(console.error);

Answer 4

When using Promise.all, you have the ability to define a generic T, allowing for precise control over the return type. This enables you to specify the expected tuple for each promise while still preserving type integrity.

If I were to implement this using async / await syntax:

interface Foo {
    gnarf: string;
}

interface Bar {
    poit: string;
}

const createFoo = async (): Promise<Foo> => {
    return {
        gnarf: "random",
    };
};

const createBar = async (): Promise<Bar> => {
    return {
        poit: "hurz",
    };
};

const doStuff = async () => {
    const [foo, bar] = await Promise.all<Foo, Bar>([createFoo(), createBar()]);

    return `${foo.gnarf} and ${bar.poit}`;
};

doStuff().then(console.log).catch(console.error);

Create a new data structure in TypeScript that stores multiple values in a

Answer №1

Answer №2

Similar questions

Can we create a class to represent a JSON object?

Another return payload failing to retrieve the return value

It’s not possible for Typescript to reach an exported function in a different module

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

What is the best way to designate external dependencies in WebPack that are not imported using '*'?

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

Is the validity of the expression !args.value || args.value.length true?

Images are failing to render on Next.js

Setting up WebPack for TypeScript with import functionality

Determine the character count of the text within an *ngFor loop

Can you explain the distinction between an optional field and a union?

Error: WebStorm's Language Service has timed out while executing TSLint operations

Issues with showing data in Angular Material tables

Verify if an item is present within a separate array

What is the best way to filter specific data types when using ngFor in Angular?

Forwarding refs in React FC allows you to easily pass down

Creating a custom decision tree in Angular/JS/TypeScript: A step-by-step guide

The process of sorting through an array of objects based on their specific types in TypeScript

What factors contribute to the variations in results reported by Eslint on different machines?

What is the importance of adding the ".js" extension when importing a custom module in Typescript?