Installing Node.js and TypeScript

There are multiple ways to get started with TypeScript. In the previous episode we have used the TypeScript Playground, but now we want to set up TypeScript on our own system. To achieve this we can install TypeScript using npm, the package manager of Node.js. The Node Package Manager allows us to easily install, manage, and share JavaScript code or even binaries like TypeScript's compiler. npm is included with Node.js and comes installed with it by default. We have to install Node.js because we need a runtime environment for executing JavaScript outside the web browser.

Installing Node.js

The simplest method for installing Node.js is by downloading the official installer from their website. It's highly recommended that you opt for the LTS version, as it offers long-term support.

The Node.js team recommends to install Node.js with a version manager like nvm. However, if you are just starting I highly recommend to just go with the Node.js installer from the Node.js website.

Using nvm to switch Node.js versions

I will quickly show how Node.js can be installed using nvm. With nvm you can manage different versions of Node.js and easily switch between them. This can be useful in case you want to test new features of the latest experimental versions of Node but also want to switch back to stable release versions to test your production applications.

If you are using macOS, Linux, or the Windows Subsystem for Linux, you can obtain nvm by opening nvm.sh in your browser. This URL will redirect you to the nvm repository on GitHub, where you can find instructions for installation.

To start with, you'll need to execute the installation script in your terminal:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source ~/.bashrc

Once this is done, you should be able to verify the nvm version by running the command nvm version. In the case of Windows, an EXE file can be downloaded from the nvm-windows repository by Corey Butler.

Testing Node.js installation

If you are able to execute node --version on your terminal you have successfully installed Node.js, along with the Node Package Manager (npm) and Node Package runner (npx). NPX stands for Node Package eXecute and can run binaries from our installed packages without having to install them globally. We will explore this feature shortly. For now, let's create our very first npm package!

Creating a Node.js package

Creating a Node.js project is simple. We just need to create a new directory, navigate into it, and execute the command npm init -y. The -y flag automatically answers all wizard questions, eliminating the need to specify a project name or version number.

After running this command, we'll notice that a single file has been created: the "package.json" file. This file is essential for every Node.js project because it specifies the entry point of our code (listed in the "main" property). In addition to other project details, the package.json file can also contain the list of dependencies for our project.

Understanding Node.js Dependencies

There are multiple types of dependencies: peer dependencies, development dependencies, and direct dependencies. For our purposes, we only need direct and development dependencies.

Direct dependencies are the ones that our project needs during its runtime. Development dependencies are dependencies that our code only needs during the design time.

As we learned in the previous episode, TypeScript is used during the design phase, so we can install it as a development dependency.

To download a development dependency, simply execute the command npm install --save-dev followed by the name of the dependency you want to install. In our case, we want to install TypeScript as a development dependency, so we would run npm install --save-dev typescript.

Because developers like to save time, there is a shorter command which is npm i -D typescript.

After the dependency has been downloaded from the npm registry, we can see a "devDependencies" object in our "package.json" file which holds an entry for "typescript". When examining the contents of our project directory, we can also see a package-lock.json file and a node_modules directory.

We'll discuss the details of these new files in a moment, for now, let's download a code editor so we can fully embrace this new era of coding.

Installing VS Code

For this course, I'll be using Visual Studio Code but I may be a little bit biased as I am a contributor to it. Feel free to use any code editor of your choice and I will see you in the next chapter.

Now, let's open up our project in VS Code and take a look! At the top of the list, we'll notice our "node underscore modules" directory. It is where all downloaded dependencies are installed. Within this directory, we can locate a directory for the typescript dependency, as well as a .bin directory. The .bin directory contains executable files for any locally installed project dependencies.

This is where npx comes into play. NPX can execute locally installed packages. By opening our terminal, we can run npx tsc --version which instructs npx to execute the TypeScript compiler, short tsc, and ask it for its version.

The TypeScript Language Server

Another tool that ships together with the typescript dependency is the TypeScript Language Server, short tsserver. The tsserver is a language service that provides intelligent code completion and error checking. It can operate in the background and provide real-time feedback to our IDE on the code being written. I have seen it being used by developers to get TypeScript code completion even within Neovim.

The TypeScript Compiler, tsc itself is a tool that compiles TypeScript code into JavaScript code, which can then be run in a browser or Node.js environment.

There is a great article online from Andrew Branch if you are interested in debugging the TypeScript Codebase.

What You Have Learned

Installing and Managing Node.js: You have learned how to install Node.js using the official installer and why choosing the LTS version is recommended for stability and long-term support. You now understand how nvm (Node Version Manager) helps manage multiple versions of Node.js, making it easier to switch between different projects.

Setting Up TypeScript: You have discovered the best practice for installing TypeScript—adding it as a development dependency (npm install -D typescript). This ensures that each project uses a specific TypeScript version, preventing version conflicts and making the setup more reliable.

Understanding npm and npx: You now know that npm (Node Package Manager) is used to install, manage, and update project dependencies. You have also learned that npx (Node Package Execute) allows you to run binaries from installed npm packages without requiring a global installation.

Managing Node.js Dependencies: You have gained clarity on the different types of dependencies in a project. Direct dependencies are essential for runtime, while development dependencies are only needed during development (such as TypeScript and testing libraries). These are listed in the package.json file and installed in the node_modules directory.

The TypeScript Compiler and Language Server: You now understand that tsc (TypeScript Compiler) converts TypeScript code into JavaScript, enabling it to run in browsers or Node.js. You have also explored tsserver (TypeScript Language Server), which provides real-time feedback, autocompletion, and error checking inside your code editor.

Creating and Managing a Node.js Project: You have learned how to initialize a new Node.js project using npm init -y, which generates a package.json file to track project settings and dependencies.

Quiz

  1. Can you explain what nvm, npm, and npx are?
  • a) They are all version managers for Node.js.
  • b) nvm manages Node.js versions, npm manages packages, and npx executes package binaries. - c) They are tools for running JavaScript in browsers.
  • d) They are libraries for TypeScript compilation.
  1. What is the difference between a dependency and a development dependency?
  • a) Dependencies are installed globally, while development dependencies are installed locally.
  • b) Dependencies are required for runtime, while development dependencies are only needed during design time.
  • c) Dependencies are compiled code, while development dependencies are uncompiled code.
  • d) Dependencies are for JavaScript, and development dependencies are for TypeScript.
  1. Which type of dependency should you select to install TypeScript?
  • a) Regular dependency (npm install typescript)
  • b) Global dependency (npm install -g typescript)
  • c) Development dependency (npm install -D typescript)
  • d) Peer dependency (no direct installation)
  1. How can you initialize a new npm package?
  • a) Run npm create package
  • b) Run npm install
  • c) Run npm init or npm init -y
  • d) Run npx tsc --init
  1. What is contained in the package.json file?
  • a) Only JavaScript source code files.
  • b) Compiled JavaScript files and logs.
  • c) Metadata about the project, dependencies, and npm scripts.
  • d) Configuration options for TypeScript compilation.
  1. What is the role of tsc and tsserver?
  • a) Both compile TypeScript to JavaScript.
  • b) tsc manages Node.js dependencies, and tsserver executes TypeScript files.
  • c) tsc compiles TypeScript, and tsserver provides IntelliSense and language services.
  • d) Both are used for testing JavaScript files.