DEV Community

ROHANYH101
ROHANYH101

Posted on

TypeScript Node.js Boilerplate

tsnode

When developing a Node.js application, integrating TypeScript can significantly enhance your coding experience Combining these benefits with tools like nodemon and ts-node can streamline your development workflow. Here's a comprehensive guide to setting up a Node.js project with TypeScript, nodemon, and ts-node.

1. Initialize Your Project

Start by creating a new directory for your project and initializing it with npm.

mkdir my-node-ts-project
cd my-node-ts-project
npm init -y
Enter fullscreen mode Exit fullscreen mode

2. Install TypeScript and ts-node

Next, install TypeScript and ts-node as development dependencies. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript, and ts-node is a utility that allows you to run TypeScript directly in Node.js.

npm install typescript ts-node --save-dev
Enter fullscreen mode Exit fullscreen mode

3. Install Nodemon

Nodemon is a tool that helps develop Node.js applications by automatically restarting the node application when file changes are detected. Install nodemon as a development dependency.

npm install nodemon --save-dev
Enter fullscreen mode Exit fullscreen mode

4. Configure TypeScript

then run the below command to generate the default tsconfig.json. This file contains the configuration for the TypeScript compiler.

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

will look something like this,

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
Enter fullscreen mode Exit fullscreen mode

5. Set Up Project Structure

Create the project structure with a source directory.

mkdir src
touch src/index.ts
Enter fullscreen mode Exit fullscreen mode
  1. Write a Sample TypeScript Code Add some basic TypeScript code in src/index.ts to test the setup.

src/index.ts

const greeting = (name: string): string => {
  return `Hello, ${name}!`;
};

console.log(greeting('World'));
Enter fullscreen mode Exit fullscreen mode

7. Configure Script,

Configure package.json to include scripts for running your TypeScript code using ts-node and nodemon.

package.json

{
  "scripts": {
    "start": "ts-node src/index.ts",
    "dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
  }
}
Enter fullscreen mode Exit fullscreen mode

start: This script runs your TypeScript file directly using ts-node.
dev: This script uses nodemon to watch for file changes in the src directory and automatically restarts the application using ts-node.

8. Run Your Application

Now, you can start your application in development mode with:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Nodemon will watch for any changes in your TypeScript files and automatically restart the application, making the development process smooth and efficient.

Conclusion

Setting up a Node.js project with TypeScript, nodemon, and ts-node enhances your development workflow by providing type safety, real-time updates, and modern JavaScript features.

Reference

For a complete example and more details, you can refer to my GitHub repository: rohanyh101.

Feel free to clone the repository and explore the setup in detail!

Top comments (0)