Learning TypeScript

Chapter 12. Using IDE Features

Programming with an

IDE the first time feels

like superpowers.

No popular programming language would be complete without syntax highlighting and other IDE features to help developing in it. One of TypeScript’s greatest strengths is that its language service provides a suite of powerful development helpers for JavaScript and TypeScript code. This chapter will cover some of the most useful items.

I highly recommend you try these IDE features out on the TypeScript projects you’ve built alongside this book. Although all the examples and screenshots in this chapter are of VS Code, my favorite editor, any IDE with TypeScript support will support most or all of this chapter. As of 2022 that includes the native support or TypeScript plugins for at least all of: Atom, Emacs, Vim, Visual Studio, and WebStorm.

Note

This chapter is a nonexhaustive list of some of the more commonly useful TypeScript IDE features, along with any default shortcuts for them in VS Code. You’ll likely find more as you keep writing TypeScript code.

Many IDE features are generally made available in the context menu surfaced by right-clicking on a name in code. IDEs such as VS Code generally show keyboard shortcuts in the context menu too. Getting comfortable with your IDE’s keyboard shortcuts can help you write code and execute refactors much more quickly.

This screenshot shows the list of commands and their shortcuts in VS Code for a variable in TypeScript (Figure 12-1).

Figure ...