Before Going to Start you Install Node.js on your local System
How to Set up a TypeScript and JavaScript Project Using Nodemon
In today’s rapidly evolving tech landscape, setting up a project with both JavaScript and TypeScript is a common practice. TypeScript, a superset of JavaScript, brings static typing to your project, making it easier to catch errors early and improve code maintainability.
Step 1: Initialize the Javascript Project
npm init: Setting Up Node.js
The first step in setting up your project is initializing a Node.js project. This is done using the npm init command, which creates a package.json file that keeps track of your project’s dependencies, scripts, and metadata.
npm init
This command will prompt you with several questions about your project. Answer them accordingly, and npm will generate a package.json file.
Installing Nodemon for Auto-reload
Nodemon is a tool that automatically restarts your Node.js application when file changes are detected. This is particularly useful during development.
npm install nodemon --save-dev
Create a src folder in your project directory. This folder will hold all your Javascript files.
Inside the package.json file, you need to add this code in the script
"start": "nodemon --exec \"cls && node\" ./src/index.js -q"
{
"name": "javascript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --exec \"cls && node\" ./src/index.js -q"
},
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^3.1.4"
}
}
The script "start": "nodemon --exec \"cls && node\" ./src/index.js -q" added to the package.json file is used to define a custom start command for your Node.js application. Here’s a brief explanation:
nodemon: This is the tool that watches your files for changes and automatically restarts your Node.js application when it detects a change.--exec: This option allows you to specify a command to execute when restarting your application."cls && node":cls: This clears the console before running your application, providing a clean output each time.node: This is the command to start the Node.js application.
./src/index.js: This specifies the path to the main file of your application that Nodemon should run.-q: This stands for “quiet” mode, which reduces the amount of output Nodemon provides in the console.
Step 2: Setting Up TypeScript
Why Use TypeScript?
TypeScript enhances JavaScript by adding static types, which help catch errors during development rather than at runtime. This is especially beneficial for larger projects where maintaining code quality is crucial.
npm init -y: Streamlining the Setup Process
To streamline the setup process, you can use the -y flag with npm init, which automatically answers all prompts with default values.
npm init -y
Creating Project Structure
Creating the src Folder for TypeScript Code
Create a src folder in your project directory. This folder will hold all your TypeScript files.
Creating the dist Folder for JavaScript Output
Similarly, create a dist folder where the compiled JavaScript files will be output.
Step 3: Installing TypeScript
1. Installing TypeScript as a Development Dependency
To work with TypeScript, you must install it as a development dependency.
npm install -g typescript
Navigate to Your Project Directory:
Open your terminal and navigate to the root directory of your project where you want to create the tsconfig.json file.
Create two Folder Dist and Src in the Typescript Project
Inside the Src create one typescript file index.ts
Creating and Running TypeScript Files
console.log("Hello, TypeScript!");
Generate tsconfig.json:
Run the following command in the terminal:
tsc --init
This command will create a tsconfig.json file in your project directory with a basic configuration.
Customize tsconfig.json:
After generating the file, you can open it in a text editor and customize it according to your project’s needs. It includes various options for configuring the TypeScript compiler, such as specifying the target JavaScript version, module system, and more.
The generated tsconfig.json file will provide a solid starting point for managing your TypeScript project’s configuration.
Step 4: Installing Nodemon
Why Use Nodemon?
Nodemon watches for changes in your files and automatically restarts the Node.js application, saving you the hassle of manual restarts.
Installing and Configuring Nodemon in package.json
After installing Nodemon, you can configure it to watch TypeScript files and automatically recompile them.
{
"name": "javascript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --exec \"cls && tsc && node ./dist/index.js\" ./src/index.ts -q"
},
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^3.1.4"
}
}
Step 5: Finally Run the Code npm run start
- NPM looks for the
"start"script in thepackage.jsonfile. - It executes the command associated with
"start", which in your case is:bash"start": "nodemon --exec \"cls && tsc && node ./dist/index.js\" ./src/index.ts -q" - Nodemon is used to start the application and watch for any changes in your files.
- cls clears the console.
- node runs the
./src/index.tsfile, which is the entry point of your application and convert the js file and store on dist. - The
-qflag makes Nodemon run in quiet mode, reducing the output in your terminal.
In short, npm run start initiates your Node.js application with auto-reload capabilities provided by Nodemon.
