An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
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.
Original Link: https://dev.to/devsmitra/how-to-solve-rest-api-routing-problem-with-decorators-5b3n
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To