Initialization of an empty array in Typescript

Question

Initialization of an empty array in Typescript

My promises array is structured as follows:

export type PromisesArray = [
  Promise<IApplicant> | null,
  Promise<ICampaign | ICampaignLight> | null,
  Promise<IApplication[]> | null,
  Promise<IComment[]> | null,
  Promise<{ status: number; message: IActionTag[] }> | null,
  Promise<IHistoryEntry[]> | null,
  Promise<IDocs> | null,
  Promise<IForm> | null,
];

I aim to initialize it with an empty value like

const promisesArray = <PromisesArray>[]

.

But, I encounter this error message:

The conversion of type '[]' to 'PromisesArray' may be a mistake due to insufficient overlap between the types. To proceed intentionally, first convert the expression to 'unknown'.
  Type '[]' lacks properties present in '[Promise<IApplicant>, Promise<ICampaign | ICampaignLight>, Promise<IApplication[]>, ...and more.]': 0, 1, 2, 3, and more.ts(2352)

Later on, when I attempt to add an item to the array:

If (this._printOptions[EPrintOption.Tags]) {
  const applicantActionsTagsPromise = ApplicantService.getActions(this._applicantId);
  promisesArray.push(applicantActionsTagsPromise); // This line triggers the error
} else {
  promisesArray.push(null);
}

This results in the following error:

The argument 'Promise<IActionTag[]>' cannot be assigned to the parameter 'Promise<IApplicant> | Promise<ICampaign | ICampaignLight> | Promise<IApplication[]> | ...and more...'.
  Type 'Promise<IActionTag[]>' is incompatible with type 'Promise<IApplicant>'.
    Certain properties are missing from 'IActionTag[]' compared to 'IApplicant': address, advertiseid, applicantid, birthdate, and others.ts(2345)

I am seeking a resolution for this issue without resorting to using the 'any' type.

javascript typescript promise

Answer 1

Answer №1

To resolve your issue in both scenarios, the complexity arises from the fact that you're adding one element at a time to the array instead of assigning the entire array altogether. If you were to modify your code so that you assign the complete Promise array at once, then you could revert back to your original definition seamlessly:

declare type PromisesArray = []
  | [
    Promise<IApplicant> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null,
    Promise<IDocs> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null,
    Promise<IDocs> | null,
    Promise<IForm> | null
  ]
;

Answer 2

To resolve your issue in both scenarios, the complexity arises from the fact that you're adding one element at a time to the array instead of assigning the entire array altogether. If you were to modify your code so that you assign the complete Promise array at once, then you could revert back to your original definition seamlessly:

declare type PromisesArray = []
  | [
    Promise<IApplicant> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null,
    Promise<IDocs> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null,
    Promise<IDocs> | null,
    Promise<IForm> | null
  ]
;

Answer 3

Answer №2

There are a couple of concerns I want to address regarding this solution:

Firstly, the issue lies in the fact that your type specifies an array that can contain null values, but not undefined values.

To set the correct initial value, it is recommended to use:

const promisesArray = <PromisesArray>[null, null, null, null, null, null, null, null];

Secondly, Array.push does not keep track of the current index, thus making it challenging to infer the proper type for each array element.

An alternative approach would be to define the entire array at once using as const. This allows TypeScript to interpret your array as a tuple, where each element has its own specific type instead of combining all types into one union.

enum Tags {
    String,
    Number,
    Boolean
}

type Options = {
    [key in Tags]?: boolean;
};

const options: Options = {
    [Tags.String]: true,
    [Tags.Boolean]: true
};

// Use `as const` to determine the array type as a tuple.
const promiseArray1 = [
    options[Tags.Number] ? Promise.resolve(5) : null,
    options[Tags.Boolean] ? Promise.resolve(true) : null,
    options[Tags.String] ? Promise.resolve('string') : null
] as const;

// Alternatively, declare the type as previously done.
type PromiseArray = [
    Promise<number> | null,
    Promise<boolean> | null,
    Promise<string> | null
];
const promiseArray2: PromiseArray = [
    options[Tags.Number] ? Promise.resolve(5) : null,
    options[Tags.Boolean] ? Promise.resolve(true) : null,
    options[Tags.String] ? Promise.resolve('string') : null
];

Playground

Answer 4

There are a couple of concerns I want to address regarding this solution:

Firstly, the issue lies in the fact that your type specifies an array that can contain null values, but not undefined values.

To set the correct initial value, it is recommended to use:

const promisesArray = <PromisesArray>[null, null, null, null, null, null, null, null];

Secondly, Array.push does not keep track of the current index, thus making it challenging to infer the proper type for each array element.

An alternative approach would be to define the entire array at once using as const. This allows TypeScript to interpret your array as a tuple, where each element has its own specific type instead of combining all types into one union.

enum Tags {
    String,
    Number,
    Boolean
}

type Options = {
    [key in Tags]?: boolean;
};

const options: Options = {
    [Tags.String]: true,
    [Tags.Boolean]: true
};

// Use `as const` to determine the array type as a tuple.
const promiseArray1 = [
    options[Tags.Number] ? Promise.resolve(5) : null,
    options[Tags.Boolean] ? Promise.resolve(true) : null,
    options[Tags.String] ? Promise.resolve('string') : null
] as const;

// Alternatively, declare the type as previously done.
type PromiseArray = [
    Promise<number> | null,
    Promise<boolean> | null,
    Promise<string> | null
];
const promiseArray2: PromiseArray = [
    options[Tags.Number] ? Promise.resolve(5) : null,
    options[Tags.Boolean] ? Promise.resolve(true) : null,
    options[Tags.String] ? Promise.resolve('string') : null
];

Playground

Answer 5

Answer №3

If you find yourself creating an array type with very specific types in each index, perhaps utilizing an Array is not the most efficient choice after all. It appears that defining a type with named properties could be more advantageous:

interface CustomPromisesBundle {
  promiseIUser?: Promise<IUser>;
  promiseIProduct?: Promise<IProduct>;
  ...
}

Answer 6

If you find yourself creating an array type with very specific types in each index, perhaps utilizing an Array is not the most efficient choice after all. It appears that defining a type with named properties could be more advantageous:

interface CustomPromisesBundle {
  promiseIUser?: Promise<IUser>;
  promiseIProduct?: Promise<IProduct>;
  ...
}

Initialization of an empty array in Typescript

Answer №1

Answer №2

Answer №3

Similar questions

What is the purpose of requiring the explicit invocation of app.listen(port) to enable express-ws to function properly?

Visual Studio Code unable to locate source maps for typescript debugging

Tips for setting a value from an AJAX-created element into a concealed form field

The value of a string in jQuery turns undefined once it is used as an argument

A guide on parsing a nested JSON file with ExtJS 4

"Jquery's .append function may sometimes display as undefined when

Error encountered during Jasmine unit testing for the ng-redux @select directive

Transforming a function into an array in TypeScript

TypeScript combines strong typing for arrays into a unified array of objects

The response from getStaticProps in Next.js is not valid

Deactivate the form element when a user selects another button

Checking if the iframe location has been modified using Jquery

With the use of discreet JavaScript, the parameter is not empty; instead, it contains values

Tips for using jQuery to slowly change a CSS property to "auto"

Node is looking for a callback function, but instead received something that is undefined

Using ES6 to generate objects within other objects

Errors with the email composer in Ionic 3 displaying "plugin_not_installed" issue

Instructions on how to insert a new row into Datatables following the successful submission of a form via AJAX请求

Unveiling the Power of KnockoutJS: Displaying HTML Content and Populating

Validation for prototype malfunctioning