Setting Up a Typescript Project using NPM
Tags: tutorial, typescript, javascript, npm
Published: 2022-02-09 15:36:09

### Let's first know what is NPM?

![JavaScript Package Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev6n6l38084egi3cjpj7.png)

[NPM](https://www.npmjs.com/) 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](https://nodejs.org/en/)** ❗❗❗

## 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._

```bash
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.

```bash
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`.

```bash
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

```bash
-  project1
  -  build
  -  src
```

### Step 5 ➡️ Install TypeScript on your system

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

```bash
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
```bash
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

```bash
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

```ts
{
  "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.

```ts
{
  "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 
```bash
tsc -w
```
or 
```bash
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 ❓

{% link https://dev.to/hima_khaitan/type-annotations-and-inference-in-typescript-5f21 %}

### Step 8 ➡️ Optional Step ❗❗

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

#### Step: 1 ➡️ Initialize NPM

```bash
npm init -y
```
Above command will create a `package.json` file in the root directory

#### Step: 2 ➡️ Installing Required Packages

```bash
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.

```bash
npm install concurrently
```
Concurrently helps in running multiple scripts simultaneously.

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

```bash
cd ./src
```
```bash
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.

```js
{
"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.

```bash
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

{% github himakhaitan/himakhaitan %}

My self Himanshu Khaitan, a Freelance Web Developer. You can connect with me [here](https://linktr.ee/hima_khaitan). 😍

You can follow me on [Twitter](https://twitter.com/hima_khaitan) or connect with me on [LinkedIn](https://linkedin.com/in/himakhatian) 🔗

You can ping me for help on my Discord Server [here](https://discord.gg/ZD9YPq8kJq).