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
or
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 '22
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 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)