DEV Community

Koichi
Koichi

Posted on

10

3 good things of OOP approach in Express.js with TypeScript

What TypeScript enables

TypeScript provides a strict typing system for JavaScript projects and saves programmers from errors during coding. In addition, it enables to use of Object-Oriented Programming(OOP) style by giving the 'Interface' and 'Abstract' class.

Not only for the client-side

Using TypeScript has become popular on the client side, but it is also applicable to server-side JavaScript. Express.js is a web framework of Node.js, a runtime environment that enables JavaScript codes to work on the server side, and TypeScript is also used with Express.

Common style of Express

Typical Express code is written in the functional programming style, as it takes a callback function at once.

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('Hello world');
});
Enter fullscreen mode Exit fullscreen mode

But, when you use TypeScript, you can make use of the Class-based style and see several merits of it.

3 advantages of using TypeScript with OOP

These are the positive merits when you take OOP approach:

  1. Reduce the number of type declarations
  2. Utilize design pattern
  3. Use Decorators

Reduce the number of type declarations

When you write controllers, you need to export all variables and type declarations. Having a controller class can put them together.

This is an example:
controller/users.ts

export class UsersController {
  public async createUser(req: Request, res: Response) {
    const user = new User(req.body);
    await user.save();
    res.status(201).send(user);
  }

  public async fetchUsers(req: Request, res: Response) {
    const users = await User.find({});
    res.status(200).send(users);
  }
}
Enter fullscreen mode Exit fullscreen mode

The router should know the controller is UsersController and detect its type.

routes/users.ts

import { Router } from 'express';
import { UsersController } from '../controllers/users';

const router = Router();
const usersController = new UsersController();
router.get('/', usersController.fetchUsers);
router.get('/create', usersController.createUser);
Enter fullscreen mode Exit fullscreen mode

You can also make a router class.

Design patterns

Design patterns are common solution patterns of software development, they go with the OOP.

  • GoF Design Patterns
  • DAO Design Pattern

Decorators

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter.
From TypeScript Official Site
Decorators are TypeScript specialty, and it is based on the OOP approach. For example, you can execute some processes before a class instance is generated.

const Something = (constructor: Function) => {
  console.log('Some functions before the class instantiate');
}

@Something
class User {
  constructor(name: string) {
    console.log(`User ${name} is created`);
  }
}

const user1 = new User('user2');
const user2 = new User('user1');
Enter fullscreen mode Exit fullscreen mode

The output is
Image description

You can set more than one decorators.

Conclusion

You can make the most of OOP and the unique features of TypeScript in Express. 
You may also like Nest.js or Deno; Both are runtime environments and natively support TypeScript.

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay