Using Async/Await in Typescript for Visual Studio IDE

As a Full Stack Developer, Visual Studio is my favorite IDE the past few years. Further, using typescript to handle javascript files is really helpful. I used to call the then() method to handle a function that returns a Promise. Even though the code works well, it is harder to read. Calling then() will increase our level of nesting. See this example below:

constructor() {
    this.getNameAsync().then(name => {
        this.name = name;
    });
}

private getNameAsync(): Promise {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(“Bob”);
        }, 1000);
    });
}

As we can see the getNameAsync() method returns a Promise, and to get its value we have to put then() after calling getNameAsync(). The parameter of the then() method is a delegate, thus increasing our level of nesting by one. The nesting gets worse if we need to process the value of this Promise, by calling another function which also returns a Promise:

constructor() {
    this.getNameAsync().then(name => {
        this.getWelcomeMessageAsync(name).then(welcomeMessage => {
            this.welcomeMessage = welcomeMessage;
        });
    });
}

private getWelcomeMessageAsync(username: string): Promise {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`Hello ${username}!`);
        }, 1000);
    });
}

private getNameAsync(): Promise {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(“Bob”);
        }, 1000);
    });
}

In order to get the welcomeMessage, the level of nesting is increased by 2. Now let’s use Async and Await instead of using the then() method:

private async loadWelcomeMessage(): Promise {
    let name = await this.getNameAsync();
    this.welcomeMessage = await this.getWelcomeMessageAsync(name);
}

private getWelcomeMessageAsync(username: string): Promise {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`Hello ${username}!`);
        }, 1000);
    });
}

private getNameAsync(): Promise {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(“Bob”);
        }, 1000);
    });
}

The nesting is now gone and our code is much more readable! Seeing this and then reading at this post here about why we should use async/await really makes me excited on using async/await in my projects.

Issue on using Async/Await in Visual Studio 2015

To support browser compatibility, we used ES5 in our project (There is no async/await in ES5). So I needed to make sure that Typescript could transpile async/await to ES5. Luckily, I found this post here which tells that TypeScript 2.1.x is now able to downgrade async/await to ES3/ES5. I was pretty sure that I could use this in my project, since I put typescript: 2.3.4 as the devDependencies in the project’s package.json file. However, the TypeScript IntelliSense in Visual Studio kept giving this error:

The problem is there is no option to choose which typescript version to use in the Tools > Options > Text Editor > TypeScript:

Then I tried to find out which typescript version I have from the Command Prompt, but it says the version is already above 2.1.x:

Turns out Visual Studio has its own typescript and in order to update it we need to install it from the official site. I assume the version was below 2.1.x before. It works like a charm now that I have installed the latest version of TypeScript for Visual Studio 2015.

Using Async/Await in Visual Studio 2017

Fortunately there is an option in the Visual Studio 2017 UI to choose which typescript version to use. It is located in Tools > Options > Text Editor > JavaScript/TypeScript > Intellisense:

With this option, there is no issue using Async/Await in Visual Studio 2017.

Samuel Hutama

Samuel is a developer at Palador. He is a Microsoft Certified Professional in Developing Azure Solutions.