How to solve REST API routing problem with decorators?

Decorators Introduction:

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

Well 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 directorycd 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 --savenpm 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');});

Step: 8

Run the following command from the terminal

npm run start

Open browser or any REST client and go to

http://localhost:3000/users

Live Example: Demo

Got any questions or additional? please leave a comment.

Thank you for reading

More content at Dev.to.

Follow me on Github, Twitter, LinkedIn, Medium, and Stackblitz.