Typescript inference error - variable with type string changes to undefined inside for loop

Question

I'm using await-to-js library for error handling (the to method in the example below comes from the library)

For some reason, the type of a variable changes to string | undefined string | undefined inside of a for..of loop, when the value of the same variable is string outside of the loop.

Consider the following example (see testMethod for error):

function to<T, U = Error>(
    promise: Promise<T>,
    errorExt?: object
): Promise<[U, undefined] | [null, T]> {
    return promise
        .then<[null, T]>((data: T) => [null, data])
        .catch<[U, undefined]>((err: U) => {
            if (errorExt) {
                const parsedError = Object.assign({}, err, errorExt);
                return [parsedError, undefined];
            }

            return [err, undefined];
        });
}


async function retrieveAccessToken(): Promise<string> {
    const randomNumber = Math.random();

    if(randomNumber < 0.5) {
        throw new Error("Failed");
    }

    return "testToken";
}

    
function printAccessToken(accessToken: string) {
    console.log(accessToken);
};

async function testMethod(): Promise<boolean> {
    const accessTokenPromise = retrieveAccessToken();

    const [err, accessToken] = await to(accessTokenPromise);

    if(err){
        console.log("Failed");
        return false;
    }

    // No error here
    printAccessToken(accessToken);

    for(let i = 0 ; i < 5; i++){
        // Error! Type Argument of type 'string | undefined' is not assignable to 
        // parameter of type 'string'.
        printAccessToken(accessToken);
    }

    return true;
}

This seems to be solved by adding a if check on accessToken eg if(!accessToken) however it doesn't make sense why the type of accessToken is string | undefined string | undefined inside of the for loop but string outside of it?

Typescript playground

Answer 1

TypeScript has issues analyzing types in destructuring syntax. To get the expected behavior, assign the resolved value of to to a local variable, and reference accessToken after checking err .

Change:

    const [err, accessToken] = await to(accessTokenPromise);

    if(err){
        console.log("Failed");
        return false;
    }

Into:

    const toResult = await to(accessTokenPromise);

    const [err] = toResult;
    if(err){
        console.log("Failed");
        return false;
    }
    const [, accessToken] = toResult;

Playground link