Rahul Sharma

Posted on Mar 23, 2022 • Updated on Nov 23, 2023

How to solve REST API routing problem with decorators?

#node #typescript #javascript #express

Decorators Introduction:

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter.

We’ll be using Method Decorators to develop routesDecorator.

Method Decorators:

A Method Decorator is declared just before a method declaration. The decorator is applied to the Property Descriptor for the method and can be used to observe, modify, or replace a method definition. A method decorator cannot be used in a declaration file, on overload, or in any other ambient context (such as in a declare class).

The expression for the method decorator will be called as a function at runtime, with the following three arguments:

Either the constructor function of the class for a static member, or the prototype of the class for an instance member.
The name of the member.
The Property Descriptor for the member.

Definition referred from typescript official site, Check more details about Method Decorators here

NOTE: Decorators are an experimental feature that may change in future releases.

Decorators use the form @expression, where expression must evaluate to a function that will be called at run-time with information about the decorated declaration.

Prerequisite:

Make sure you have installed the latest Node.js
Basic knowledge of javascript, typescript, node.js, and express.js
Code editor (vs code)

Step 1:

Open the terminal and run the following command

mkdir decorator-routes //create directory
cd decorator-routes

Step 2:

Initialize the Node.js project using the following command from the terminal

npm init

Your package.json will look like this.

package.json:

{
  "name": "decorator-routes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Step 3:

Install dependencies using the following command.

npm i express --save
npm i typescript @types/express -D

Note: -D marks things as “used for development” while --save (which is the default, and therefore optional) means “used by the program when it is deployed”.

@types packages provide type information to TypeScript, but they are not used when your code is running/deployed.

Tip: npm i is a shortcut for npm install, and -D is a short for --save-dev.

package.json

{
  ...
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "typescript": "^4.6.2"
  }
}

Step 4:

Add tsc and start scripts in the package.json

package.json

{
  ...
  "scripts": {
    "prestart": "tsc",
    "start": "node ./dist/server.js"
  },
  ...
}

Step 5:

Create tsconfing.json and enable experimentalDecorators

Create a text file called tsconfig.json in your root folder, put below code in it:
To enable experimental support for decorators, you must enable the experimentalDecorators in your tsconfig.json

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "lib": ["ES2018"],
        "target": "es2017",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "dist",
        "experimentalDecorators": true,
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

Step: 6

Create a src the directory in your root folder
Create subdirectories(controllers, decorators) inside src.

Step: 7

Create a text file called routes.decorator.ts inside src/decorators folder, and add below code in it:

src/decorators/routes.decorator.ts

import { Router } from 'express';
export const appRouter = Router();

interface IOptions {
    path: string;
    method: 'get'| 'post'| 'put' | 'delete' ;
    middlewares?: any[],
}

function routesDecorator(options: IOptions) {
    return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
       (appRouter as any)[options.method](options.path, target[propertyKey]);
    };
}
export default routesDecorator;

Create a index.ts inside src/decorators folder, and add below code in it:

src/decorators/index.ts

export * from './routes.decorator';

Create a Users.controller.ts inside src/controllers folder, and add below code in it:

src/controllers/Users.controller.ts

import { Request, Response } from 'express';
import routes from '../decorators/routes.decorator';
export class Users {
    @routes({
        path: '/users',
        method: 'get'
    })
    getUsers(req: Request, res: Response) {
        res.send('Typescript Decorators are awesome !!!');
    }
}

Create a index.ts inside src/controllers folder, and add below code in it:

src/controllers/index.ts

export * from ‘./Users.controller’;

Create a server.ts inside src folder, and add below code in it:

src/server.ts

import * as express from 'express';
const app = express();
import './controllers';
import { appRouter } from './decorators/routes.decorator';
app.use(appRouter);
app.listen(3000,()=>{
    console.log('Server is running on port 3000');
});