How to configure TypeScript environment?

#typescript #javascript #npm #webdev

What is TypeScript?

TypeScript is a superset of JavaScript. It provides all the features of JavaScript along with its own set of features. TypeScript provides optional static typing, classes, and interfaces. One of the main benefits of using TypeScript is you can spot and eliminate common errors as you code. You can learn more about TypeScript on their official docs.

In this article, I am going to explain how you can configure your windows machine for TypeScript development. The steps should be fairly similar for Linux & Mac as well.

Prerequisites

To run TypeScript, you should have two things installed on your system.

Node
A Package Manager - NPM or Yarn

In this tutorial, I am going to use NPM. Feel free to use Yarn if you want to.

Installing Node & NPM

You can install Node on your system using two different methods :

NVM
Node executable - You can download the executable file from the Node website and run it to install Node on your system.

I am going to install Node using NVM. NVM stands for Node Version Manager. It is a utility program using which you can install any version of Node as required. You can install Node using NVM by following the given steps:

Open this link in your browser and download nvm-setup.zip for the most recent release.
Extract the folder and run the nvm-setup.exe file.
Follow the installation steps to install NVM.
Once the installation is complete, open command prompt or Powershell and run the nvm ls command. You will see No installations recognized in your prompt if you don't have Node installed on your machine otherwise you will see the installed Node versions.
Run nvm list available to see the list of available Node versions.
I recommend installing the recent LTS version. I am going to install version 14.7.6. You can install any version you want. Just replace the 14.7.6 with your selected version. To install the Node, run nvm install 14.17.6.
After the command is executed successfully, run nvm use 14.17.6 to start using the Node in your system.
You have now successfully installed Node and NPM on your system.

Installing TypeScript

To install TypeScript globally, run the following command -
npm install --global typescript

This command will install TypeScript globally upon successful completion.

You can now start using TypeScript in your projects.

How to run a TypeScript program?

Create a directory anywhere in your system.
I will write a sample TS program. TypeScript programs have extension .ts.

Sample.ts

const addNumbers = (num1: number, num2: number) : number => {
 return num1 + num2;
}

addNumbers(5,7);

To run this code, we will use the TypeScript compiler.
In command prompt/Powershell run tsc Sample.ts.
You will see Sample.js after successful compilation.
You have successfully created and executed your first TypeScript program.

Note

You can customize the TypeScript compiler or tsc using various options. These options can be passed as flags or you can create a config file called tsconfig.json. You can write compiler configuration inside this file. TypeScript compiler will then automatically follow the specified options inside the config file.

You can use tsc -w or tsc --watch followed by program name (optional). This command will continuously watch for any changes in the TypeScript file. It will compile the file whenever any change is encountered.
Running npx tsc —init will generate tsconfig.json file for you.

You can read more about tsconfig here.

Thank you for reading the article. Happy coding!