Small Bytes: Get Started with TypeScript (Premium)

Previously, I wrote about TypeScript and how web developers can use it to create safer and more error-free JavaScript web apps. But without knowing any better, I assumed it would be easy---automatic even---to get started with TypeScript using Visual Studio Code. But that turned out to not be the case, and after struggling for a while to figure out something called npm, I turned to full-on Visual Studio instead. And … same thing.

So let’s start at the beginning: you want to get started with TypeScript, are in fact trying to learn TypeScript. What needs to happen first?

Well, Visual Studio Code (VSC) happens first. Described as a lightweight integrated development environment (IDE), VSC is a cross-platform success story the likes of which Microsoft has rarely seen. Even some of Microsoft’s harshest, Linux-using detractors begrudgingly admit that VSC is the best code editor on their favorite platform, and they recommend it to others highly. If Microsoft has any chance of winning over the crowd that will never forget or forgive the phrase “Linux is cancer,” it all rests on VSC’s shoulders.

That said, my active developer days are many moons behind me, and so I still find VSC a bit confusing compared to more traditional IDEs like Visual Studio 2022. But it attracts a different, more modern kind of developer, especially those who are fluent in things like GitHub and Firebase, and are building anything web-based: backend web services or front-end web apps. And these solutions are very often based on JavaScript, the foundation for TypeScript.

VSC supports JavaScript and TypeScript---and HTML, Java, C/C++, C#, and many other languages---out of the box, but it’s also extensible to an incredible degree, and part of the success of this editor/IDE is how many extensions have been built for it. But VSC “supporting” a language is one thing, this only means that the code editor can recognize the syntax of these languages and provide appropriate IntelliSense syntax highlighting and autocomplete. What we also need, for TypeScript, is the ability to compile TypeScript code into JavaScript.

The obvious place to start, then, is the TypeScript website. There, you will learn that you need to install the TypeScript compiler using something called npm (the node package manager). So you have to figure out npm. I Googled npm, logically enough, and ended up at the npm website. Which … doesn’t help at all. The issue is in its name: npm is a command line tool that lets you install packages for the popular JavaScript runtime environment node.js. So you don’t install npm. You install node.js. Which gives you npm. Which lets you install the TypeScript compiler.

(To be clear, you can of course run JavaScript code in a web browser. You can also run JavaScript code directly in the console of a web browser’s developer tools if you want. But, among other things, node.js gives us a way to run JavaScript code outside of a browser. In this s...