Himanshu Khaitan

Posted on Feb 9, 2022

Setting Up a Typescript Project using NPM

#tutorial #typescript #javascript #npm

Let's first know what is NPM?

NPM is a JavaScript Package Manager. It is a software registry with over 800,000 code packages. It is absolutely free to use.

❗❗❗In the tutorial below, I will assume that your system has a Nodejs version >=16.13.1 installed in it. If not, you can download it from here ❗❗❗

Setting Up the Project

I will use command line and vs-code to setup this project. You may use any code editor of your choice.

Step 1 ➡️ Create the Project Folder

Run this command in the terminal to create the project folder named project1.

❗❗Project name depends on your choice. I have taken it to be project1.

mkdir project1

Step 2 ➡️ Change the Project Directory

Now jump into the project directory you just created. Command will vary on the name chosen by you in last step.

cd project1

Step 3 ➡️ Create Source Code Folder

To separate source code from the compiled code we need to create two separate folders. Following the convention I am taking their names as src and build.

mkdir src

Step 4 ➡️ Create Build Folder

This folder will contain all the compiled code in the same file hierarchy as your source code.

mkdir build

📂 File System after above commands

-  project1
  -  build
  -  src

Step 5 ➡️ Install TypeScript on your system

Before initialize the typescript project we need to install Typescript using NPM

npm install -g typescript

The command will install TypeScript globally on your system. You have to run this command only once.

❗❗❗You can also install it for a specific project by following command

npm install typescript --save-dev

⚠️⚠️This command must be ran in the root folder. In this case project1

Step 6 ➡️ Initialize TypeScript Project

To initialize a TypeScript Project we need to run the init command in root directory

tsc --init

This will create a tsconfig.json file in the root directory.

After this, we need to tell our typescript compiler about the src and build directory

Let's first have a look at `tsconfig.json` file

{
  "compilerOptions": {


    "target": "es2016",                                  

    "module": "commonjs",                               
    // "rootDir": "./",                                  


    // "outDir": "./",                                   

    "strict": true,                                      
    "skipLibCheck": true                                 
  }
}

⚠️⚠️ Above is the small portion of tsconfig.json file.

Step 7 ➡️ Configure TypeScript Config File

We need to update two options rootDir and outDir to achieve the above.

{
  "compilerOptions": {


    "target": "es2016",                                 

    "module": "commonjs",                                
    "rootDir": "./src",                                  


    "outDir": "./build",                                  

    "strict": true,                                      
    "skipLibCheck": true                                 
  }
}

✅ We have updated the output Directory and Input Directory for the compiler.

To run the compiler all you have to do is run

tsc -w

tsc

in the root directory and your build is ready.

tsc -w will keep looking for changes in the typescript files and update the build accordingly

Want to read about Type Annotations and Inference in TypeScript ❓

Type Annotations and Inference in Typescript

Himanshu Khaitan ・ Feb 4 ・ 3 min read

#typescript #beginners #tutorial #javascript

Step 8 ➡️ Optional Step ❗❗

To keep the development smooth we can optimize out project setup.

Step: 1 ➡️ Initialize NPM

npm init -y

Above command will create a package.json file in the root directory

Step: 2 ➡️ Installing Required Packages

npm install -g nodemon

Above command will install nodemon globally on your computer. Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected hence making development smoother.

npm install concurrently

Concurrently helps in running multiple scripts simultaneously.

Step: 3 ➡️ Creating index.ts in src 📂

cd ./src

touch index.ts

Above commands will create a index.ts file in the src directory.

Step: 4 ➡️ Configuring `package.json`

With nodemon and concurrently installed in our project, we can edit script option in json file.

{
"scripts": {
    "start:build": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"
  }
}

Phew❗We are done. With the above command you can start with the development with the below command.

npm run start

You are good to go.

Any Suggestions, Reviews, Ideas, Help Requests or positive criticism are welcome. I will love to connect.

Thanks for reading the Blog. Hope you found it Helpful

himakhaitan / himakhaitan

Happily Turning Coffee into Code☕💻. The repository is a quick overview of my current skills and commits🌱

I write code, build communities and love to interact with people around.

An avid and passionate coder specializing in different languages. I love to build and design websites which the end user would enjoy using while keeping the website performant and the code clean. Up for freelance web development work, social media managment and collaborating on exciting Open Source & Personal projects.

Currently I am learning advanced concepts of Typescript and getting hands dirty in Competitive Programming.