DEV Community

Cover image for Setting Up a Typescript Project using NPM
Himanshu Khaitan
Himanshu Khaitan

Posted on

Setting Up a Typescript Project using NPM

Let's first know what is NPM?

JavaScript Package Manager

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Step 4 ➡️ Create Build Folder

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



mkdir build


Enter fullscreen mode Exit fullscreen mode

📂 File System after above commands



-  project1
  -  build
  -  src


Enter fullscreen mode Exit fullscreen mode

Step 5 ➡️ Install TypeScript on your system

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



npm install -g typescript


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

⚠️⚠️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


Enter fullscreen mode Exit fullscreen mode

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                                 
  }
}


Enter fullscreen mode Exit fullscreen mode

⚠️⚠️ 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                                 
  }
}


Enter fullscreen mode Exit fullscreen mode

✅ 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


Enter fullscreen mode Exit fullscreen mode

or



tsc


Enter fullscreen mode Exit fullscreen mode

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 ❓

Step 8 ➡️ Optional Step ❗❗

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

Step: 1 ➡️ Initialize NPM



npm init -y


Enter fullscreen mode Exit fullscreen mode

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

Step: 2 ➡️ Installing Required Packages



npm install -g nodemon


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Concurrently helps in running multiple scripts simultaneously.

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



cd ./src


Enter fullscreen mode Exit fullscreen mode


touch index.ts


Enter fullscreen mode Exit fullscreen mode

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:*"
  }
}


Enter fullscreen mode Exit fullscreen mode

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



npm run start


Enter fullscreen mode Exit fullscreen mode

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

GitHub logo 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 unravel data mysteries.

     

Who is Himanshu Khaitan ❓

🚀 Hey there, I'm Himanshu – a budding Data Analyst and a freelance Software Developer trying to make lives easier through code. I am currently building Karmic Crew - A platform for beginners. I'm all ears for discussions and casual chats. Let's connect and exchange ideas!

⚡ Stuff I Know

                                          

                                                 

               

- Profile Visits -

Happily turning coffee into code!✅






My self Himanshu Khaitan, a Freelance Web Developer. You can connect with me here. 😍

You can follow me on Twitter or connect with me on LinkedIn 🔗

You can ping me for help on my Discord Server here.

Top comments (0)