How to Install TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It is maintained and developed by Microsoft. In this section, we will learn how to install TypeScript, the prerequisites before installation of TypeScript, and how many ways we can install TypeScript.

Prerequisites to install TypeScript

1. Text Editor or IDE
2. js Package Manager (npm)

Install Node.js and Package Manager (npm)

Before installing TypeScript, Node.js should be installed on our system. Node.js is a JavaScript runtime that permits us to execute code outside the browser. It is an important component for many modern web applications.

Use the following method to install Node.js on Windows:

• For Windows: Go to the official website of Node.js. There will be an option for Windows Installer(.msi). Click on it and it will start downloading Node.js.

Go to the downloaded .msi file where it is located and double-click on it. After that, follow all the steps provided by the setup assistant, accept the license and agreement and make use of the default settings for installation.

After the above steps, Node.js will be installed in your system. After the installation, verify whether the installation was successful or not. Enter the following command in the Terminal Window to verify the installation of Node.js.

• For Linux: Run the following command in the Linux terminal to install Node.js.

Run the following command to install npm in your system.

After the installation, by running the given command, verify whether the Node.js and npm installation were successful or not.

• For Mac: Download the js installer for Mac. Go to the official Node.js website and download the macOS installer. Select the LTS version because it is supported for the long term and is a stable version.

After installation, verify whether it is successfully installed or not. Run the following command.

After the installation of Node.js, our system will be ready to install TypeScript.

Installing TypeScript:

We can install TypeScript in three ways, depending on our development environment and how we plan to utilize it:

1. Install TypeScript using js Package Manager (npm).
2. Install the TypeScript plug-in in your IDE (Integrated Development Environment).
3. Install the TypeScript NuGet Package.

1. Install TypeScript utilizing Node.js Package Manager (NPM):

Let us install TypeScript using different ways.

• Install on Windows:

Once we have installed Node.js, our system is ready to install TypeScript. A step-by-step installation guide is given below:

Open Command Prompt: In your system, go to the Start menu and open the Command Prompt and run the given command to install TypeScript globally:

Execute the following command to install TypeScript locally:

After the installation, verify the version of installed TypeScript by running the given command.

Here, tsc is the TypeScript compiler and the -v flag indicates the version of TypeScript.

To install a specific version of TypeScript:

If you want to install a specific version of TypeScript then run the following command:

At the place of 5.2.2, put the version number that you want to install.

• Install on Linux:

We can install TypeScript on Linux by running the following command:

To verify the installation, run the following command:

• Install on macOS:

We can install TypeScript globally on macOS by running the following command:

sudo npm install -g typescript

We can run the following command to check the version of TypeScript:

3. Install the TypeScript plug-in in your IDE (Integrated Development Environment)

Let us install the TypeScript plug-in using different IDEs.

• VS Code:

VS Code supports TypeScript, but some extra features can be added through extensions. We can add features by following these steps:

Step 1: Go to VS Code.

Step 2: On the left sidebar there will be an option for extensions. We can press Ctrl+Shift+X to open it.

Step 3: Search for TypeScript, TypeScript Compiler, TypeScript Hero, ESLint or any other tool, extensions or plugins.

Step 4: Click Install.

Visual Studio (VS) Code already includes the TypeScript language service, so usually we don't need to download extra plugins.

• WebStorm/IntelliJ IDEA

TypeScript support is built into JetBrains IDEs but may need to be enabled. We can enable it by following below steps:

Step 1: Open settings/preferences.

Step 2: Go to Language & Frameworks

Step 3: Check Enable TypeScript and enable it.

• Sublime Text:

If Package Control is not already installed then install Package Control. You have to open Command Palette, then choose Package Control Install Package. And after that, search for "TypeScript" and install it.

• Install TypeScript by Microsoft

We can install TypeScript by Microsoft or other maintained versions. Here we will see how to install the Atom TypeScript installation.

Step 1: Open Atom then click on Settings.

Step 2: Go to the install tab.

Step 3: Search for "atom-typescript".

Step 4: Click Install.

3. Install the TypeScript NuGet Package

We can install TypeScript as a NuGet package for a .NET or .NET Core project. It provides an MSBuild task for TypeScript which will compile .ts files to .js files as per tsconfig.json configuration when we build our project.

For projects utilizing the TypeScript NuGet package, right-click on the project node and open NuGet Package Manager. Click Manage NuGet Packages and in the Browse tab, search for TypeScript. It will open a list that contains all the packages related to TypeScript then select Microsoft.TypeScript.MsBuild and click the install button. By clicking on the install button, we can install TypeScript in our local ASP.NET project.

TypeScript Playground

An online playground is provided by TypeScript. You can visit the TypeScript Playground at the official website where we can write and test TypeScript code without any installation.

This playground is a great place for beginners to learn TypeScript and try different features. It also provides us with an option to share our code via a shareable link.

Creating a TypeScript Project:

Let's create a simple project utilizing TypeScript to understand the workflow and check the installation.

Step 1: Create a Project Folder

• Create Folder: First, create a folder on your desktop and give it a name, e.g., TypeScript-hello.
• Create a TypeScript File: After creating a folder inside this folder, create a file named main.ts.

Step 2: Initialize TypeScript Project

To initialize a TypeScript Project, run the following command to create a tsconfig.json file:

This file contains all the configurations for the Typescript compiler.

Step 3: Write TypeScript Code:

Open main.ts: In the main.ts file, write the following code and save the main.ts file

Step 4: Compile TypeScript Code:

Compile TypeScript: Run the TypeScript compiler with the file name as an argument:

Step 5: Run the JavaScript Code:

Run with Node.js: Execute the compiled JavaScript file utilizing Node.js.

Tips for utilizing TypeScript

• Leverage Type Annotations: TypeScript enhances the readability and maintainability of the code. We should utilize type annotations.
• Explore Configuration Options: Customize json to suit our project's needs.
• Stay Updated: If you want to have the benefit of the latest features and improvements of TypeScript then you should regularly update it.

Conclusion:

In this article, we have covered how to install TypeScript and its basics. By setting up TypeScript, we can catch errors early in the development process, improving code quality and reducing runtime errors. We can install TypeScript with the help of this article.