Guide To Configure Typescript With Your Node App

Node.js and TypeScript are two popular programming tools that are used by developers to build robust and scalable applications. While Node.js is a potent JavaScript runtime environment that enables developers to write server-side code using JavaScript, TypeScript is a superset of JavaScript that offers optional static typing, making it easier to write and maintain complex applications.

Combining Node.js and TypeScript has become more common in recent years as it enables programmers to build more trustworthy, scalable, and maintainable systems. In this blog, we’ll look at the benefits of integrating TypeScript with Node.js and how to get started.

Benefits Of Using Node.Js With TypeScript:

• TypeScript offers strong typing, catching errors at compile-time instead of runtime.
• Improved code navigation and completion in modern editors like VSCode.
• Clear and concise interfaces and classes for enhanced readability.
• TypeScript makes code more modular, testable, and reusable, ensuring better scalability.

Getting Started With Node.Js And TypeScript:

To get started with Node.js and TypeScript, we need to install Node.js and TypeScript on our development machine.

Installing Node.js:

Node.js can be downloaded from the official website https://nodejs.org/enRun installer. After downloading it, follow the given instructions.

Installing TypeScript:

TypeScript can be installed using npm (Node Package Manager), which comes with Node.js. Open a terminal or command prompt and run the following command.

npm install -g typescript

This command will install TypeScript globally on your system.

Creating A TypeScript Project:

Once we have Node.js and TypeScript installed, we can create a new TypeScript project. To create a new project, we follow these steps:

1. Open a terminal or command prompt and navigate to the directory where you want to create your project.

2.Run the following command to initialize a new Node.js project:

    npm init -y

This command will create a new package.json file in your project directory.

3.Install the necessary dependencies:

npm install express body-parser cors @types/express @types/body-parser @types/cors typescript nodemon --save-dev

• Express: A web framework for Node.js.
• body-parser: A middleware for parsing request bodies.
• cors: A middleware for enabling cross-origin resource sharing.
• @types/express: TypeScript type definitions for Express.
• @types/body-parser: TypeScript type definitions for body-parser.
• @types/cors: TypeScript type definitions for cors.
• typescript: The TypeScript compiler.
• nodemon: A tool for automatically restarting the server on file changes.

4. Create an src directory and tsconfig.json file with the following command:

mkdir src
touch tsconfig.json

5. Open the tsconfig.json file and add the following configuration:

{
  "compilerOptions": {
    "target": "es2016", // or just "es6"
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
  }
}

• target: The version of ECMAScript to target.
• module: The module format to use
• outDir: The output directory for compiled files
• rootDir: specifies the root directory of TypeScript source files for the TypeScript compiler.
• strict: Enables strict type checking
• esModuleInterop: Enables interoperability between CommonJS and ES Modules

6. Add the following scripts to the package.json file:

"scripts": {
    "start": "node dist/index.js",
    "dev": "nodemon src/index.ts",
    "build": "tsc -p ."
  }

• The “start” script runs the compiled Node.js application from the “dist” folder.
• The “dev” script runs the application in development mode with “nodemon”, using the TypeScript file located in “src”.
• The “build” script compiles the TypeScript files in the current directory using the TypeScript compiler (“tsc”) with the configuration file (“tsconfig.json”).

7. Create a src/index.ts file with the following content:

import express, { Application, NextFunction, Request, Response } from 'express';
  import bodyParser from 'body-parser';
  import cors from 'cors';
  const app: Application = express();
  app.use(bodyParser.json());
  app.use(cors());
  app.get('/', (req: Requret, res: Response, next: NextFunction) => {
    res.send('Hello World!');
  });
  app.listen(3000, () => {
   console.log('Server listening on port 3000');
  });

8. This creates an Express application that listens on port 3000 and responds to requests with “Hello World!”

9. Run the server with the following command:

npm run dev

The server should startand you should see the message “Server listening on port 3000” in the console.

And that’s it! You now have the basic configuration for a Node.js server with TypeScript.

With TypeScript, you can write safer and more scalable code that is easier to maintain and extend. So go ahead and start building some amazing applications!