<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Omar3ain</title>
    <description>The latest articles on Forem by Omar3ain (@omar3ain).</description>
    <link>https://forem.com/omar3ain</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1047526%2F7dcacfdc-d27d-4436-9bfc-6c90a96747d9.jpeg</url>
      <title>Forem: Omar3ain</title>
      <link>https://forem.com/omar3ain</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/omar3ain"/>
    <language>en</language>
    <item>
      <title>Building Scalable and Maintainable Node.js Applications with TypeScript and OOP Principles</title>
      <dc:creator>Omar3ain</dc:creator>
      <pubDate>Sun, 19 Mar 2023 17:03:11 +0000</pubDate>
      <link>https://forem.com/omar3ain/building-scalable-and-maintainable-nodejs-applications-with-typescript-and-oop-principles-48op</link>
      <guid>https://forem.com/omar3ain/building-scalable-and-maintainable-nodejs-applications-with-typescript-and-oop-principles-48op</guid>
      <description>&lt;p&gt;&lt;strong&gt;TypeScript&lt;/strong&gt; is a powerful language that adds a layer of type safety and code organization to JavaScript. It has become increasingly popular in the Node.js community due to its ability to provide better code quality, maintainability, and scalability. In this article, we will explore how to use TypeScript with Node.js using Object-Oriented Programming (OOP) principles.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Object-Oriented Programming&lt;/strong&gt; is a programming paradigm that focuses on creating objects that encapsulate data and behavior. In TypeScript, we can create classes that define the structure and behavior of objects. Classes can have properties, methods, and constructors, and can inherit from other classes.&lt;/p&gt;

&lt;h1&gt;
  
  
  Let's build an application
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;1.&lt;/strong&gt; First we need to make a new folder and initialize npm in this folder by the following commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir myproject
cd myproject
npm init -y
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;strong&gt;2.&lt;/strong&gt; To use TypeScript with Node.js, we first need to install the TypeScript compiler and other dependencies. We can do this using the npm package manager by running the following command:&lt;/p&gt;

&lt;h3&gt;
  
  
  Development dependencies
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i -D typescript 
tsc-watch
eslint 
prettier 
eslint-config-prettier
eslint-plugin-prettier
@typescript-eslint/parser 
@typescript-eslint/eslint-plugin
@types/node @types/express

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Dependencies
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i express dotenv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;•  &lt;strong&gt;typescript&lt;/strong&gt; is the package that adds TypeScript support to the project.&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;tsc-watch&lt;/strong&gt; is a package that allows you to watch for changes to TypeScript files and automatically recompile them.&lt;/p&gt;

&lt;p&gt;•  &lt;strong&gt;eslint&lt;/strong&gt; is a package that provides linting functionality for the project.&lt;/p&gt;

&lt;p&gt;•  &lt;strong&gt;prettier&lt;/strong&gt; is a package that provides code formatting functionality for the project.&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;eslint-config-prettier&lt;/strong&gt; and &lt;strong&gt;eslint-plugin-prettier&lt;/strong&gt; are packages that configure ESLint to work with Prettier.&lt;/p&gt;

&lt;p&gt;•  &lt;strong&gt;@typescript-eslint/parser&lt;/strong&gt; and &lt;strong&gt;@typescript-eslint/eslint-plugin&lt;/strong&gt; are packages that provide ESLint rules specific to TypeScript.&lt;/p&gt;

&lt;p&gt;•  &lt;strong&gt;@types/node&lt;/strong&gt; and &lt;strong&gt;@types/express&lt;/strong&gt; are packages that provide TypeScript definitions for the Node.js and Express libraries.&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;express&lt;/strong&gt; is a popular Node.js web framework that simplifies the process of building web applications. It provides a set of features for handling HTTP requests and responses, routing, middleware, and more. By using express, developers can create scalable and maintainable web applications with ease.&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;dotenv&lt;/strong&gt; is a package that allows you to load environment variables from a .env file into your Node.js application. This is useful for storing sensitive information such as API keys, database credentials, and other configuration settings. By using dotenv, developers can keep their application secrets secure and separate from the application code.&lt;/p&gt;

&lt;p&gt;By installing these packages, developers can benefit from TypeScript's type-checking, linting, and code formatting features, which can help catch errors early and make the codebase more maintainable.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;3.&lt;/strong&gt; So you can make the structure of the project like this or you can structure it as you want:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;├── node_modules/ 
├── src/
│   ├── interfaces/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── app.ts        --------&amp;gt; Demo of this file will be in the 
│   │                           next point same for server.ts
│   └── server.ts     
├── tests/         
│   ├── unit/
│   └── integration/
├── .env             --------&amp;gt;  contains environment 
│                               variables used by the 
│                               application, loaded in through 
│                               the dotenv package.
│
├── .eslintrc.json   --------&amp;gt; .eslintrc.json and .prettierrc
│                              contain configuration for ESLint 
│                              and Prettier, respectively, which 
│                              are used for  code linting and 
│                              formatting.
│                             
├── .prettierrc
├── package.json
├── tsconfig.json     --------&amp;gt; contains the configuration for 
│                              TypeScript, which includes 
│                             information on how to transpile the 
│                             TypeScript code into JavaScript
│                             that can be run by Node.js.
└── README.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;strong&gt;4.&lt;/strong&gt; App.ts file will be like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import express , { Application } from 'express';
import mongoose from 'mongoose';
import Controller from '@/utils/interfaces/controller.interface';
import ErrorMiddleware from '@/middlewares/error.middleware';


class App {
  public expess: Application;
  public port :number;

  constructor(controllers : Controller[] , port : number) {
    this.expess = express();
    this.port = port;
    // THE ORDER OF THESE FUNCTIONS IS IMPORTANT 
    this.initializeDatabaseConnection();
    this.initializeMiddleware();
    this.initializeControllers(controllers);
    this.initializeErrorHandling();
  }

 private initializeDatabaseConnection() : void {
    const { MONGO_USERNAME, MONGO_PASSWORD, MONGO_PATH } = process.env;
mongoose.connect(`mongodb://${MONGO_USERNAME}:${MONGO_PASSWORD}${MONGO_PATH}`);
  }

  private initializeMiddleware() : void {
    this.expess.use(express.json());
    this.expess.use(express.urlencoded({ extended: true }));
  }

  private initializeControllers(controllers : Controller[]) : void {
    controllers.forEach((controller : Controller) =&amp;gt; {
      this.expess.use('/api', controller.router);
    })
  }

  private initializeErrorHandling() : void {
    this.expess.use(ErrorMiddleware);
  }

  public listen() : void {
    this.expess.listen(this.port, () =&amp;gt; {
      console.log(`App listening on port ${this.port}`);
    })
  }

}

export default App;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Where Controller interface will be like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { Router } from 'express';

interface Controller {
  path : string;
  router : Router;
}

export default Controller;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and ErrorMiddleware will be like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { Request , Response , NextFunction } from "express";

function ErrorMiddleware(error: Error  ,req: Request, res: Response, next: NextFunction) : void {
  const status = error.status || 500;
  const message = error.message || "Something went wrong";

  res.status(status).send({
    status,
    message
  })

}
export default ErrorMiddleware;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;strong&gt;5.&lt;/strong&gt;  Every controller will implement Controller interface like this :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { Router, Request, Response, NextFunction } from 'express';
import Controller from '@/interfaces/controller.interface';

class ControllerExample implements Controller {
    public path = '/posts';
    public router = Router();

    constructor() {
        this.initializeRoutes();
    }

    private initializeRoutes(): void {
        this.router.post(
            `${this.path}`,
            this.HttpHandle
        );
    }

    private HttpHandle =(
        req: Request,
        res: Response,
        next: NextFunction
    ): Promise&amp;lt;Response | void&amp;gt; =&amp;gt; {
       return res.json({message : "success"})
    };
}

export default ControllerExample;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;strong&gt;6.&lt;/strong&gt;  &lt;strong&gt;Finally&lt;/strong&gt; server.ts file will be like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import 'dotenv/config';
import App from './app';
import ControllerExample from '@/controllers/ControllerFile';


const app = new App(
    [new ControllerExample()],
    Number(process.env.PORT)
);

app.listen();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first line imports and loads the environment variables specified in a .env file using the dotenv package.&lt;/p&gt;

&lt;p&gt;An instance of the &lt;strong&gt;App class&lt;/strong&gt; is created with an array of controllers and it has one controller for now (ControllerExample) and a port number specified in the environment variables.&lt;/p&gt;

&lt;p&gt;Finally, the listen() method of the App instance is called to start the server and listen for incoming requests.&lt;/p&gt;




&lt;p&gt;This code demonstrates a clean and organized way to start a server for a Node.js application built with TypeScript, with controllers separated by resources and environment variables defined in a .env file.&lt;/p&gt;




&lt;p&gt;Thank you for taking the time to read my article and hope all of you learn something from it.&lt;/p&gt;

&lt;p&gt;Follow me on LinkedIn : &lt;a href="https://www.linkedin.com/in/omar3ain/"&gt;Click here&lt;/a&gt;&lt;/p&gt;

</description>
      <category>node</category>
      <category>typescript</category>
      <category>oop</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
