Solution for the error “await’ expression is only allowed within an async function” in TypeScript

The async / await keywords are a feature that helps us to work with asynchronous functions. Let’s find out why we get the error message ‘await’ expression is only allowed within an async function‘ in TypeScript and how we can use the ‘async‘ keyword to solve this problem.

The cause of this error

As we mentioned above, using the Async/Await keyword allows us to work with asynchronous functions. The reason you are getting this error is that you used the keyword ‘await‘ in a function that was not marked as ‘async‘.

To illustrate, here is an example of how the error occurs:

function greeting() {
    const myPromise = await Promise.resolve("Welcome to LearnShareIT community");
    console.log(myPromise);
}

greeting();

Output:

'await' expressions are only allowed within async functions and at the top levels of modules.

As you can see, we didn’t declare the function ‘greeting‘ as an asynchronous function, so we can not use the ‘await‘ keyword in it.

How to solve “await’ expression is only allowed within an async function” error

To work around this issue, make sure you use the ‘await‘ keyword inside a function marked as asynchronous by the ‘async‘ keyword.

async function greeting() {
    const promise1 = await Promise.resolve("Welcome to the LearnShareIT community.");
    console.log(promise1);
}

greeting();  

Output:

"Welcome to the LearnShareIT community." 

The ‘async‘ keyword was used before the function declaration, and now the error is gone.

Another case is also straightforward to confuse and cause errors. You should pay attention to avoid unexpected errors. E.g., when you use forEach or map methods.

Take a look at this example:

async function getNumbers() {
    const numbers = [10, 20, 30];

    numbers.forEach((num) => {
        const myPromise = await Promise.resolve(num); // This line cause the error
        console.log(myPromise);
    });
}

At this point, you should notice that the asynchronous function must be the function you passed in the forEach method, not the function ‘getNumbers‘. The reason is completely understandable because the ‘await’ keyword is used in the callback function of the method forEach().

You just need to change the position of the ‘async’ keyword. The error is fixed.

function getNumbers() {
    const numbers = [10, 20, 30];

    // Mark the callback function as asynchronous
    numbers.forEach(async (num) => {
        const myPromise = await Promise.resolve(num);
        console.log(myPromise);
    });
}

getNumbers();  

Output:

10
20
30

Summary

In summary, to resolve the error message ‘await’ expression is only allowed within an async function‘ in TypeScript, you must use the ‘await‘ keyword in the function itself marked as ‘async‘. You must also pay attention to their placement when multiple functions are used in a nest. We hope this article will help you in this regard.

Maybe you are interested:

• Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext’ – How to fix it?
• Cannot find module ‘react’ in TypeScript

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js