TS1106: The left-hand side of a 'for...of' statement may not be 'async'

TypeScript is a powerful programming language that builds on JavaScript by adding static typing to the mix. Static typing means that you can define the types of variables, function return values, and parameters, allowing developers to catch errors earlier in the development process. The use of types helps to make the code more understandable and maintainable. If you’re eager to improve your TypeScript skills or explore AI tools such as gpteach to learn coding, consider subscribing to this blog for more insights!

What Are Types?

Types in TypeScript refer to the different kinds of values that can be used in your code. They help in defining variables, function signatures, and the structure of complex data. For instance, you could have types like number, string, boolean, and more complex types like arrays, tuples, and objects. Here’s a simple example:

let age: number = 30; // 'age' is a variable of type number
let name: string = "John"; // 'name' is a variable of type string

Understanding TS1106: The left-hand side of a 'for...of' statement may not be 'async'

When you come across the error TS1106: The left-hand side of a 'for...of' statement may not be 'async', it indicates that you are trying to use async inappropriately in the context of a for...of loop.

The for...of statement is used to iterate over iterable objects, like arrays, but the left-hand side of this statement should not be an async function. It is a common mistake among developers new to TypeScript or JavaScript.

Example of the Error

Here's a code snippet that demonstrates this error.

async function fetchData() {
    const data = [1, 2, 3];

    for await (const item of data) { // This will cause the TS1106 error
        console.log(item);
    }
}

In this example, for await...of is incorrectly attempted to be used, which leads to the error TS1106: The left-hand side of a 'for...of' statement may not be 'async'.

Correcting the Error

To fix the error, simply remove async from the left-hand side. If you want to perform asynchronous operations inside your loop, you can use a regular for...of statement and handle the asynchronous tasks inside the loop:

async function fetchData() {
    const data = [1, 2, 3];

    for (const item of data) { // Correct usage of 'for...of'
        await processItem(item); // Handle async operation here
    }
}

async function processItem(item: number) {
    // Example of an async operation
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(item);
            resolve(item);
        }, 1000);
    });
}

Here, processItem(item) is called within the loop, allowing for asynchronous operations without causing the TS1106 error.

Important Things to Know

1. Correct Syntax: Always ensure that for...of is not preceded by async.
2. Use for await...of: This syntax is valid only when iterating over asynchronous iterables, not in plain loops.
3. Error Handling: Use try...catch blocks to handle errors from asynchronous operations inside your loop.
4. Types: Ensure that the types of your variables are always clarified, as TypeScript benefits from type definitions to better understand your code structure.

FAQ's

Q: What is the difference between for...of and for...await...of?

A: for...of is used for synchronous iteration, while for await...of is used for asynchronous iteration over asynchronous iterables.

Q: Can I use async before for...of blocks?

A: No, doing so will lead to the TS1106 error: The left-hand side of a 'for...of' statement may not be 'async'.

Q: How should I structure my async functions in loops?

A: Use a regular for...of loop, and perform async calls inside by awaiting those calls.

By understanding the error TS1106: The left-hand side of a 'for...of' statement may not be 'async', you can refine your TypeScript coding practices and avoid common pitfalls. Happy coding!