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);
Enter fullscreen mode Exit fullscreen mode
  • 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!

Discussion (5)

Collapse
lukeshiru profile image
LUKESHIRU

Nice! Sharing just to add to the article, you can install pnpm (instead of npm or yarn) before everything using their standalone installer (you don't even need node). Then you can use pnpm to install n, and use n to install node. Finally you can use pnpm in the place where you'll use npm (similar API), so for example to install TS you can just pnpm i -g typescript.

Cheers!

Collapse
vivekalhat profile image
Vivek Alhat Author

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.

Thread Thread
lukeshiru profile image
LUKESHIRU

You can still overcome that with a flag in pnpm and handle the directory structure in a less elegant way by doing pnpm i --shamefully-hoist.

The actual issue is with those packages. If the package maintainer has bad practices importing something that isn't in their direct dependecies, then it will not work ok with pnpm. Basically this happens because package-a has a dependency package-b, and package-b has a dependency package-c, so the package-a owner imports stuff from package-c because they asume it will be there, without actually adding package-c to their direct dependencies.

Collapse
saroj8455 profile image
Saroj Padhan

Nice