# TypeScript’s New Top-Level Await If you want to use `async`/`await` inside JavaScript in general, you have to define an `async` function before you can use the `await`. In this article, I want to show you that it is possible to finally use top-level `await` instead of wrapping it between an `async`function. _Note: The top-level_ `_await_` _is part of a_ [_stage 3 proposal_](https://github.com/tc39/proposal-top-level-await) _for the ECMAScript spec. It may change in the future._ ### How Does async/await Work? In a previous article, I wrote about the history of doing Ajax calls in the early days with XHR until now with the Fetch API. [**From XHR to Fetch With Async/Await on the Finish Line** _A look at the evolution and history of requests in JavaScript_medium.com](https://medium.com/better-programming/from-xhr-to-fetch-with-async-await-on-the-finish-line-b021de1d226b "https://medium.com/better-programming/from-xhr-to-fetch-with-async-await-on-the-finish-line-b021de1d226b")[](https://medium.com/better-programming/from-xhr-to-fetch-with-async-await-on-the-finish-line-b021de1d226b) Promises are an essential part of `async`/`await`. Without them, we can’t use them. Most modern environments in JavaScript (like HTTP requests) are asynchronous, and many modern APIs returns promises. While this has a lot of benefits in making operations non-blocking, it makes certain code for loading files or external content less readable. fetch("...") .then(response => response.json()) .then(data => { console.log(data) }); People are used to using promises in JavaScript with a `async` function to use `await`. But this will execute the function right after the definition, which feels weird. It’s missing the point of using a function. > I’ve gathered a couple of [aspiring developers around the world on a Discord server](https://mailchi.mp/fb82491d03f8/dev-by-rayray-discord-community), feel free if you like to join in. ### Top-Level await It would be better to use `await` without wrapping it in an `async` function. With the release of [TypeScript 3.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#top-level-await), we received this feature. Take into account that it’s only supported natively in Chrome. To use it, we have to create a module. It’s a module when it is exporting something via `export`. const response = await fetch("..."); const data = await response.json(); console.log(data); export {}; If you ask me, this code is much more readable. Because we don’t have to create an `async` function, it also saves a bit of code. _Read more about JavaScript modules at_ [_MDN Web Docs_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)_._ ### TypeScript Configuration To use top-level `await` in TypeScript, you have to set the `target` compiler option to `es2017` or higher. The `module` option has to be set to `esnext` or `system`. ### Conclusion I think it’s awesome that the TypeScript team has built top-level `await` into the language. What do you think? Are you going to use it? Please let me know in the comments. _Originally posted on_ [_ByRayRay.dev_](https://byrayray.dev/type-script-s-new-top-level-await/) #### [Join my newsletter “Developer Underdogs” and get a weekly edition with the best developer content created by aspiring developers that you may not know.](https://www.getrevue.co/profile/devbyrayray) ### Read more [**Use CLI tools From Mac/Linux On Windows Subsystem for Linux** _WSL2 is so powerful to make the switch from Mac a breeze._medium.com](https://medium.com/dev-together/use-cli-tools-from-mac-linux-on-windows-subsystem-for-linux-37d16f012489 "https://medium.com/dev-together/use-cli-tools-from-mac-linux-on-windows-subsystem-for-linux-37d16f012489")[](https://medium.com/dev-together/use-cli-tools-from-mac-linux-on-windows-subsystem-for-linux-37d16f012489) [**3 Todo’s Before Applying For A Junior Developer Job** _I’ve seen a lot of job applications from junior developers. Most of the applications are made with the best intentions…_medium.com](https://medium.com/dev-together/3-todos-before-applying-for-a-junior-developer-job-26fc0d8ba2b9 "https://medium.com/dev-together/3-todos-before-applying-for-a-junior-developer-job-26fc0d8ba2b9")[](https://medium.com/dev-together/3-todos-before-applying-for-a-junior-developer-job-26fc0d8ba2b9) [**Why Tutorials Won’t Make You a Professional Developer** _Mastery comes from more than doing tutorials. Try, fail, learn, repeat!_medium.com](https://medium.com/better-programming/why-tutorials-wont-make-you-a-professional-developer-271108c74ddb "https://medium.com/better-programming/why-tutorials-wont-make-you-a-professional-developer-271108c74ddb")[](https://medium.com/better-programming/why-tutorials-wont-make-you-a-professional-developer-271108c74ddb) [**Tips to Create Developer Tutorials** _Want to write more tutorials but you aren’t sure where to start? Start here_medium.com](https://medium.com/better-programming/tips-to-create-developer-tutorials-62cb3a25b8e5 "https://medium.com/better-programming/tips-to-create-developer-tutorials-62cb3a25b8e5")[](https://medium.com/better-programming/tips-to-create-developer-tutorials-62cb3a25b8e5)