DEV Community

Cover image for How to configure TypeScript environment?
Vivek Alhat
Vivek Alhat

Posted on

How to configure TypeScript environment?

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. NVM
  • 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](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).

Thank you for reading the article. Happy coding!
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
vivekalhat profile image
Vivek Alhat

Thank you for your response. I'll definitely try pnpm. I just looked it up, and it seems worth a try.

Collapse
 
wsedlacek profile image
William Sedlacek

pnpm is much faster than npm but I have had issues with using it on Angular, Nativescript and React Native projects.

Definitely worth a call out but I wouldn't recommend it for those just coming into JavaScript and the node ecosystem.

npm v7 is fast enough and reliable so it would be my recommendation.

Collapse
 
saroj8455 profile image
Saroj Padhan

Nice