Express.js With Typescript Decorators in Examples
Let’s take a look at how we can make our Express.js Server code cleaner with use of the Typescript Method Decorators.
What will be covered in this story:
- Prerequisites. Creating Express Typescript project
- Wrapping Express API Route with Typescript Method Decorator
- Async Method Decorator
- Adding Logging Decorator
- Adding Authentication Decorator
- Codesandbox Playground
1. Prerequisites. Creating Express Typescript project
Before we will start exploring Express.js with Typescript Decorators examples, we will create a simple Typescript Node.js project with Express.js and some additional npm packages that will be in use in our work. Let’s get started.
First, create an empty folder and initialize npm project by running npm init -y in the root directory: (-y flag means that you are answering yes to all npm questions):
We will need to add some npm packages to the dependencies:
yarn add express body-parserAnd some npm packages to the dev dependencies:
yarn add typescript @types/node @types/express ts-node -DNext, we will need to add tsconfig.json file by running npx tsc — init in the root of our project:
tsconfig.json⚠️NOTE: To enable experimental support for decorators, you must enable the experimentalDecorators compiler option in your tsconfig.json file
Next, we will need to create a /src/server.ts file:
… and the index.ts file that will be an entry point of our application:
NOTE: I have already created a “start” script in the
package.jsonfile.
Before we will start implementing our first API Route with use of the Typescript Decorators, let’s test that everything works as expected by running “start” script in the console:
yarn run startIf everything was configured without any issues you will see this message in the console:
🚀 Server is running on port 3000
🎉 Congratulations! We are ready to implement our first API Route.
2. Wrapping Express API Route with Typescript Method Decorator
If you are not familiar with Typescript Decorators, what are PropertyDescriptor and descriptor.value are, I would recommend you to check out this story first:
Let’s create our first function in the Routes class:
routeConfig function is a Typescript MethodDecorator that is added to the “anyNameYouLike” function. The main goal of this Decorator is to specify our API Route method (GET/POST), and a path.
Let’s re-run our application and see what we get:
🎉 Nice, we have created our first API Route Decorator.
3. Async Method Decorator
Our previous example will not work with async code, let me demostrate you this issue.
We will create a new “post” endpoint that should return String message after 2 seconds:
If we will re-run our server and will make a request using Insomnia or a Postman to that endpoint we will get 200 status empty response:
To change such undesirable behaviour we will need to modify our routeConfig Method Decorator so it could handleasync code:
Now we can re-run our application to make sure that everything works as expected (gif):
4. Adding Logging Decorator
For logging user requests we will create a simple Method Decorator that will log user’s request data to the console and pass it through. Decorators work in chain, so we need to pass data to next decorator or execute it:
Now we can add it to our route…
… and make our request:
Result in the terminal:
5. Adding Authentication Decorator
Now we can add authentication decorator that will allow us to filter users:
Now we can add this auth decorator to our route:
After adding authorization token “123" (Bearer text will be added automatically by Insomnia):
And result would be:
6. Codesandbox Playground
I have created a codesandbox playgroud for you, so you could test is by yourself:
You can open it in a new tab…
… and see the API server URL (https://kjitb.sse.codesandbox.io/ for example).
🎉 Happy coding!
Related stories
If you want to know more about Typescript Decorators, you can take a look about it here:
