We shared how to implement decorators in TypeScript in our previous article, “Basic TypeScript Decorator Syntax.”

But in the article, in order to briefly explain the implementation syntax of the decorator, there are no specific functions cited in the examples, just the shell of the decorator, so that people do not have a strong sense of “what can I use the decorator to do”.

Therefore, this article hopes to introduce the specific application scenarios of various decorators with the help of NestJS, a popular server-side framework. Also quite then “throw a brick to attract jade”, hope can bring a few inspiration to the train of thought that uses adornment to everybody.

Note: This article mainly focuses on the use and non-use of the decorator, not how it is implemented.

Why NestJS

NestJS is a popular node.js server framework in recent years. It believes that there is no framework on the market to effectively solve the problem of server JS architecture

However, while plenty of superb libraries, helpers, and tools exist for Node (and server-side JavaScript), none of them effectively solve the main problem of – Architecture

So it comes with an architectural design that it hopes will help you build testable, extensible, loosely coupled, and easily maintainable applications.

Nest provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications. The architecture is heavily inspired by Angular.

So one of the things that’s obvious in the architectural design is the use of a lot of decorators, which is very much in line with our topic today, to explore the use of decorators, to see if it really brings advantages

Route mapping

In most server applications, when receiving a request from a client, the Router determines the interface of the Controller to which the request needs to be sent according to the request path

Previously, most Node frameworks achieved this functionality in two steps:

  • Define controllers and their interfaces
  • Add a route to the Router and map it to a specific Controller interface

In NestJS, we can do this via decorators:

The core is the following two points:

  • @controller (‘user’) declares that all requests to ‘/user/**’ are forwarded to UserController for processing;
  • @get (‘list’) further states that Get requests for ‘/user/list’ need to be handled by the getUserList method.

In this way, we have declared the mapping of the routes at a glance while implementing the Controller.

At the same time, you can also use @GET, @POST, @PUT and other method decorators to declare the processing logic for different types of requests such as Get, Post, and Put

Processing of request parameters

If we receive a request, we often need to retrieve parameters from the request.

When it is a GET request, it may be Param or Query; When a POST request is made, it might be a Body.

Previously, most Node frameworks would need to retrieve this data ourselves:

In NestJS, we can get the target data directly from the parameter decorator:

Similarly, @param, @Query, @body decorators get the target data we need

conclusion

This article looks at some very simple examples of how class decorators, method decorators, and parameter decorators are used in real world scenarios.

Of course, these frames offer much more than that, and the use of decorators also offers a variety of scenarios worth exploring.

For a more in-depth look at the design and implementation of NestJS and Angular, I recommend.

reference

  • NestJS official documentation
  • Angular Official documentation