Exploring the power of async/await and promise in TypeScript

Question

Exploring the power of async/await and promise in TypeScript

I'm puzzled as to why the return type string in this method is showing up as a red error:

exportPageAsText(pageNumber: number): string {
        (async () => {
            const text = await this.pdfViewerService.getPageAsText(pageNumber);
            console.log(text);
            return text;
        })();
}

The error message states:

A function whose declared type is neither 'void' nor 'any' must return a value.

so I tried moving return text; outside of the async block and placing it after })();, but then the text variable became unrecognized.

At that point, I considered changing the method's signature to use a Promise like so:

exportPageAsText(pageNumber: number): Promise<string>

However, I encountered another error stating that

A function whose declared type is neither 'void' nor 'any' must return a value.

If anyone could shed some light on what I might be doing incorrectly, I would greatly appreciate it.

javascript typescript asynchronous async-await

Answer 1

Answer №1

To utilize await, you must have an async function. The code you've written is actually a self-invoking async function, which means that returning a value inside this function won't return it for the main function.

In order to achieve your goal, you need to convert the main function into an async one and define the return type as Promise<string>:

async exportPageAsText(pageNumber: number): Promise<string> {
  const text = await this.pdfViewerService.getPageAsText(pageNumber);
  console.log(text);
  return text;
}

Answer 2

To utilize await, you must have an async function. The code you've written is actually a self-invoking async function, which means that returning a value inside this function won't return it for the main function.

In order to achieve your goal, you need to convert the main function into an async one and define the return type as Promise<string>:

async exportPageAsText(pageNumber: number): Promise<string> {
  const text = await this.pdfViewerService.getPageAsText(pageNumber);
  console.log(text);
  return text;
}

Answer 3

Answer №2

Your current method is waiting for a return before the end, but even the promise declared by async() => {...} is not being returned.

There are two things that need to be changed in your code:

You need to return the async()
You should change the type of return in the method declaration to Promise<string>

In your syntax, it will look like this:

exportPageAsText(pageNumber: number): Promise<string> {
    return (async () => {
        const text = await this.pdfViewerService.getPageAsText(pageNumber);
        console.log(text);
        return text;
    })();
}

Answer 4

Your current method is waiting for a return before the end, but even the promise declared by async() => {...} is not being returned.

There are two things that need to be changed in your code:

You need to return the async()
You should change the type of return in the method declaration to Promise<string>

In your syntax, it will look like this:

exportPageAsText(pageNumber: number): Promise<string> {
    return (async () => {
        const text = await this.pdfViewerService.getPageAsText(pageNumber);
        console.log(text);
        return text;
    })();
}

Answer 5

Answer №3

Here is my approach using async/await:

    const savePageText = async (pageNum: number): Promise<string> => {
        const pageText: string = await this.pdfViewerService.getPageText(pageNum);
        console.log(pageText);
        return pageText;
    }

Answer 6

Here is my approach using async/await:

    const savePageText = async (pageNum: number): Promise<string> => {
        const pageText: string = await this.pdfViewerService.getPageText(pageNum);
        console.log(pageText);
        return pageText;
    }

Exploring the power of async/await and promise in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Typescript to inject dependencies and receive arguments within a class

Implementing a Beveled Edge on a Shape using ThreeJS

Does embedding an Iframe for external files from your server enhance the loading speed of the current page compared to directly loading it on the page?

Encountering an 'Unknown provider' error while running a unit test with AngularJS and Jasmine

Obtain the maximum or minimum value from an associative array using a function and provided parameters

Utilizing JavaScript for loops to extract the final element from an array

Struggling to comprehend the intricacies of these generic declarations, particularly when it comes to Type Argument Lists

Currently, I am working on a project and encountering an issue with html2canvas

Creating 3D Shapes with three.js

What could be causing my web application to not properly identify angular.js?

Instructions for creating a circular image using the Next.js image component in Next.js version 13

JavaScript - Merging the two JSON requests into a unified object

Customize the initial color of the text field in Material UI

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

What is the best way to create a TypeScript interface or type definition for my constant variable?

Express JS causing NodeJS error | "Issue with setting headers: Unable to set headers after they have been sent to the client"

Is it possible to maintain the input and output types while creating a function chain factory in

Attempting to iterate through a Query each loop for the Raphael object

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

Encountering the error message: "TypeError [ERR_INVALID_ARG_TYPE]: The initial parameter should either be a string, Buffer instance, or Uint8Array."