This content originally appeared on DEV Community and was authored by Himanshu Khaitan
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.jsonfile 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 ❓
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.
⚡ 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.
This content originally appeared on DEV Community and was authored by Himanshu Khaitan
Himanshu Khaitan | Sciencx (2022-02-09T15:36:09+00:00) Setting Up a Typescript Project using NPM. Retrieved from https://www.scien.cx/2022/02/09/setting-up-a-typescript-project-using-npm/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.