Why does TypeScript combine the types of both indices when yielding a tuple?

Question

Why does TypeScript combine the types of both indices when yielding a tuple?

In my generator function, I am yielding an array containing values of type [number, object]. By using a for...of loop to iterate over the function and destructuring the values with for (const [k, v] of iterator()), I noticed that the type of v is number | object. This was unexpected as I had specified the type as object in the yield statement of the generator function.

To demonstrate this issue, I have created a TypeScript REPL example which can be found here.

The issue arises in line number 22, where the TypeScript compiler raises an error regarding accessing a key that may not exist post-destructuring.

I am puzzled by why TypeScript assumes that the variables obtained through destructuring could be either of the specified types?

typescript destructuring for-of-loop

Answer 1

Answer №1

It's important to note that this issue is not related to generators. In JavaScript, array literals are often automatically widened to array types. However, you can use the as const assertion to maintain the tuple type and achieve the desired outcome.

(function iterate() {
    function* iterator() {
        let id: number = 0;
        const value: {
            a: number,
            b: number
        } = {
            a: 1,
            b: 2
        };
        while (id < 10) {
            yield [
                id,
                value
            ] as const;

            id += 1;
        }
    }

    for (const [k, v] of iterator()) {
        console.log(k, v.a);
    }
})();

Answer 2

It's important to note that this issue is not related to generators. In JavaScript, array literals are often automatically widened to array types. However, you can use the as const assertion to maintain the tuple type and achieve the desired outcome.

(function iterate() {
    function* iterator() {
        let id: number = 0;
        const value: {
            a: number,
            b: number
        } = {
            a: 1,
            b: 2
        };
        while (id < 10) {
            yield [
                id,
                value
            ] as const;

            id += 1;
        }
    }

    for (const [k, v] of iterator()) {
        console.log(k, v.a);
    }
})();

Why does TypeScript combine the types of both indices when yielding a tuple?

Answer №1

Similar questions

A Step-by-Step Guide on Updating Your Angular 7 Project to Angular Version

Modify the JSON format for the API POST request

In TypeScript, how are angle brackets like methodName<string>() utilized?

Sending the HTML input value to a Knockout view

Eradicate lines that are empty

Advantages of creating model classes in Angular 2 and above

The for loop finishes execution before the Observable in Angular emits its values

Exploring JSONPath in Cypress

Duplicate the ng-template using ng-content as the body (make a duplicate of ng-content)

Ever tried asynchronous iteration with promises?

Although VSCode is functioning properly, there seems to be a discrepancy between the VSCode and the TS compiler, resulting in an

Difficulty encountered when converting objects into an array of a model within Angular

Calling gtag("event") from an API route in NextJS

Managing Modules at Runtime in Electron and Typescript: Best Practices to Ensure Smooth Operation

React Quill editor fails to render properly in React project

Adjust the height of a div vertically in Angular 2+

Using TypeScript to filter and compare two arrays based on a specific condition

How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

The component prop of Typography in TypeScript does not accept MUI styling

The downloaded zip file appears to be corrupt and cannot be opened