The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

Question

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

I'm currently working on a service to cache documents in base64 format. The idea is to first check sessionStorage for the document, and if it's not there, fetch it from IRequestService and then store it in sessionStorage. However, I've encountered a type error while trying to implement this.

The error message reads: Type 'Promise<void | GetDocumentResult>' is not assignable to type 'Promise<GetDocumentResult>'.

Here is the code snippet:

getDocument(requestId: string, documentId: DocumentID, requestService: IRequestService): Promise<GetDocumentResult> {
    if (this.storageKey in sessionStorage) {
      const documentsMap: Map<DocumentID, GetDocumentResult> = new Map(JSON.parse(sessionStorage.getItem(this.storageKey)!))
      if (documentsMap.get(documentId) !== undefined) {
        return new Promise(resolve => resolve(documentsMap.get(documentId)!))
      }
    }

    return requestService.getDocument(requestId, documentId)
      .then(value => {this.setDocument(documentId, value)})
}

I was anticipating the return type of Promise< GetDocumentResult >.then to be Promise< GetDocumentResult >, but it appears to be Promise<void | GetDocumentResult> instead. Can someone shed some light on why this is happening?

Thank you

javascript typescript promise

Answer 1

Answer №1

It has been previously mentioned that the then callback returns void, not the result itself. If you are looking for the result, consider implementing the following:

getDocument(requestId: string, documentId: DocumentID, requestService: IRequestService): Promise<GetDocumentResult> {
  if (this.storageKey in sessionStorage) {
    const documentsMap: Map<DocumentID, GetDocumentResult> = new Map(JSON.parse(sessionStorage.getItem(this.storageKey)!));
    const document = documentsMap.get(documentId);
    if (document !== undefined) {
      return Promise.resolve(document);
    }
  }

  return requestService.getDocument(requestId, documentId).then(value => {
    this.setDocument(documentId, value);
    return value;
//  ^^^^^^^^^^^^
  });
}

Additionally, it is advisable to separate the cache lookup and storage logic (such as setDocument) into a distinct service. This service can maintain the documentsMap in memory instead of parsing JSON each time getDocument is invoked.

Answer 2

It has been previously mentioned that the then callback returns void, not the result itself. If you are looking for the result, consider implementing the following:

getDocument(requestId: string, documentId: DocumentID, requestService: IRequestService): Promise<GetDocumentResult> {
  if (this.storageKey in sessionStorage) {
    const documentsMap: Map<DocumentID, GetDocumentResult> = new Map(JSON.parse(sessionStorage.getItem(this.storageKey)!));
    const document = documentsMap.get(documentId);
    if (document !== undefined) {
      return Promise.resolve(document);
    }
  }

  return requestService.getDocument(requestId, documentId).then(value => {
    this.setDocument(documentId, value);
    return value;
//  ^^^^^^^^^^^^
  });
}

Additionally, it is advisable to separate the cache lookup and storage logic (such as setDocument) into a distinct service. This service can maintain the documentsMap in memory instead of parsing JSON each time getDocument is invoked.

Answer 3

Answer №2

It appears that you may be facing an issue because you are not providing any return value within your .then() method.

Consider the following code snippet:

 .then(value => {this.setDocument(documentId, value)})

This results in your function returning a type of Promise<void> instead of Promise<GetDocumentResult>.

A corrected version would look like this:

getDocument(requestId: string, documentId: DocumentID, requestService: IRequestService): Promise<GetDocumentResult> {
    if (this.storageKey in sessionStorage) {
      const documentsMap: Map<DocumentID, GetDocumentResult> = new Map(JSON.parse(sessionStorage.getItem(this.storageKey)!))
      if (documentsMap.get(documentId) !== undefined) {
        return new Promise(resolve => resolve(documentsMap.get(documentId)!))
      }
    }

    return requestService.getDocument(requestId, documentId)
      .then(value => { return this.setDocument(documentId, value)})
}

Answer 4

It appears that you may be facing an issue because you are not providing any return value within your .then() method.

Consider the following code snippet:

 .then(value => {this.setDocument(documentId, value)})

This results in your function returning a type of Promise<void> instead of Promise<GetDocumentResult>.

A corrected version would look like this:

getDocument(requestId: string, documentId: DocumentID, requestService: IRequestService): Promise<GetDocumentResult> {
    if (this.storageKey in sessionStorage) {
      const documentsMap: Map<DocumentID, GetDocumentResult> = new Map(JSON.parse(sessionStorage.getItem(this.storageKey)!))
      if (documentsMap.get(documentId) !== undefined) {
        return new Promise(resolve => resolve(documentsMap.get(documentId)!))
      }
    }

    return requestService.getDocument(requestId, documentId)
      .then(value => { return this.setDocument(documentId, value)})
}

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

Answer №1

Answer №2

Similar questions

Execute a series of Promises (or Deferreds) consecutively and have the flexibility to pause or stop at any point

How do I preserve data within $scope upon switching views using ng-include?

Is it possible to nullify an object and utilize nullish coalescing for handling potentially undefined constants?

Calculating the time gap between two consecutive "keyup" occurrences

When opening a dialog at the bottom of the page, the window will automatically scroll to the top

A comprehensive guide on creating translation files using grunt angular-translate from original JSON files containing translations

Storing row details in Vue.js based on selected options from a dropdown menu

A guide on seamlessly incorporating FlotJs functionalities into a ReactJs application

Guide to easily printing a page in Angular 4 using TypeScript

Navigating the implementation of undefined returned data in useQuery hook within Apollo and ReactJS

What is the process for invoking an External Javascript Firestore function within a Typescript file?

Prevent the use of the + or - symbols within the body of a regular expression when

What is the procedure for invoking a function when the edit icon is clicked in an Angular application

Type parameter in express.js route

Performing three consecutive Ajax requests in a Rails application

Explore the properties within an array of objects through iteration

Generating a two-dimensional array and setting its values in JavaScript

Crushing jQuery's Sortable/Droppable

Ways of invoking a component method from a service in Angular 2

Rearrange HTML list items automatically according to changes in numeric sort order