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 could be causing JSON.parse to encounter errors when parsing a string array?

Is there a distinction in functionality when utilizing fat arrow syntax versus traditional syntax for ES6 class methods and React?

Generating automatic generic types in Typescript without needing to explicitly declare the type

discord.js tutorial on cutting a hyperlink

Improving Javascript Arrays for Easier Reading

Is there a way to invert the orientation of an object within a canvas?

Harnessing the Power of NextJS Image Component and @svgr/webpack for Seamless Integration

Sending information from a parent component to a nested child component in Vue.js

Executing functions in a pre-defined order with AngularJS: A step-by-step guide

Achieving responsive masonry layout with Bootstrap 4

Encountering this issue despite confirming the presence of data on the line before! What could be the missing piece here? Error: Unable to access property 'includes' of undefined

The application's functionality is interrupted when router.navigate() is called within the .subscribe method

The ui.bootstrap.carousel component seems to be missing from the display

Panel floating with Bootstrap framework

Utilizing .html() to convert JSON data into HTML content

Eslint in Gulp can't locate my .eslintrc configuration file

Angular 7 ERROR: The SystemJS reference is missing

Guide on how to initiate a file download with text area content by clicking an HTML button

Using Cheerio with a Node.js bot

I am encountering an issue with my Javascript file not running due to a bigint error