Using TypeScript and encountering Error TS2345 when trying to utilize Promise.all() in a dialog component

Question

Using TypeScript and encountering Error TS2345 when trying to utilize Promise.all() in a dialog component

I have a TypeScript function that I need help with:

    private async deleteSelectedLuminaires (): Promise<any[]> {
    return this.dialogService.open({ viewModel: DeleteLuminaire, model: 'Cancel or Ok', lock: false })
    .whenClosed((response) => {
      if (!response.wasCancelled) {
        const requests = this.selectedSerials
          .map(async (serial) => this.luminaireApi.removeLuminaire({ serial }))

        return Promise.all(requests)
      }
    })
  }

The function this.luminaireApi.removeLuminaire returns Promise< void >. I am encountering an error when using the Dialog service to ask a question in this function. After deleting the dialog, I receive the following error message:

error TS2345: Argument of type '(response: DialogCloseResult) => Promise | undefined' is not assignable to parameter of type '(value: DialogCloseResult) => any[] | PromiseLike'. Type 'Promise | undefined' is not assignable to type 'any[] | PromiseLike'. Type 'undefined' is not assignable to type 'any[] | PromiseLike'.

I believe the issue lies in combining dialog and Promise.all, but I am unsure of the exact reason. Could someone please assist me in resolving this problem?

typescript promise dialog

Answer 1

Answer №1

It appears that there is a function in your codebase that could potentially return either a Promise or undefined, implying that there might be a missing return statement in one of the code branches.

This scenario is represented by

(response: DialogCloseResult) => Promise | undefined

.

To resolve this issue, you should ensure that the method responsible for handling a DialogCloseResult consistently returns a Promise and not undefined. If you cannot modify the signature of this method, consider using a type guard or type assertion to handle the return value appropriately.

Type Guard

if (typeof returnValue !== 'undefined') {
    // This block handles when the return value is a Promise
}

Type Assertion

promiseValue = <Promise>returnValue;

Answer 2

It appears that there is a function in your codebase that could potentially return either a Promise or undefined, implying that there might be a missing return statement in one of the code branches.

This scenario is represented by

(response: DialogCloseResult) => Promise | undefined

.

To resolve this issue, you should ensure that the method responsible for handling a DialogCloseResult consistently returns a Promise and not undefined. If you cannot modify the signature of this method, consider using a type guard or type assertion to handle the return value appropriately.

Type Guard

if (typeof returnValue !== 'undefined') {
    // This block handles when the return value is a Promise
}

Type Assertion

promiseValue = <Promise>returnValue;

Answer 3

Answer №2

Below is my solution to the problem:

async function deleteSelectedItems(): Promise<any> {
    let promises: Promise<any>

    return this.confirmationDialog.open({ viewModel: ConfirmDelete, model: 'Cancel or Confirm', lock: false })
        .whenClosed(async (response) => {
            if (!response.wasCancelled) {
                promises = Promise.all(this.selectedItems
                    .map(async (item) => this.api.removeItem({ id: item.id })))
            }

            return promises
        })
}

Answer 4

Below is my solution to the problem:

async function deleteSelectedItems(): Promise<any> {
    let promises: Promise<any>

    return this.confirmationDialog.open({ viewModel: ConfirmDelete, model: 'Cancel or Confirm', lock: false })
        .whenClosed(async (response) => {
            if (!response.wasCancelled) {
                promises = Promise.all(this.selectedItems
                    .map(async (item) => this.api.removeItem({ id: item.id })))
            }

            return promises
        })
}

Using TypeScript and encountering Error TS2345 when trying to utilize Promise.all() in a dialog component

Answer №1

Answer №2

Similar questions

What is the best way to pass the modal dialog parameter sent from HTML to the TypeScript page?

To properly display a URL on a webpage using Angular, it is necessary to decode

Updating data through SessionStorage.set() method isn't reflecting changes

PIXI.js fails to optimize image loading and loads the same image multiple times when a base URL is used

Exploring Angular (5) http client capabilities with the options to observe and specify the response type as 'blob'

What is the process for integrating a third party API certificate into my Heroku application?

Validating Forms in TypeScript

Best practices for safely handling dynamic keys in Typescript

Selected structures in rust

No pipe named '' was discovered

Problem encountered when attempting to return data received from database queries executed within a loop

Select characteristics with designated attribute types

Using socket.io-client in Angular 4: A Step-by-Step Guide

When using my recursive type on Window or Element, I encounter a type instantiation error stating "Type instantiation is excessively deep and possibly infinite.ts"

Using TypeScript to pass an object's method as an argument in a function call

The function is failing to trigger when clicked within an Angular 5 app

One-of-a-kind npm module for typescript

Updating the DOM after making changes with Maquette involves calling the `renderMaquette

Identifying the absence of a character at the end of the last line in Node.js to detect

I encountered TS2300 error stating a duplicate identifier appeared once I transferred my code to Angular CLI