Express.js with Typescript Decorators in Examples

Image for post
Image for post

What will be covered in this story:

  1. Prerequisites. Creating Express Typescript project
  2. Wrapping Express API Route with Typescript Method Decorator
  3. Async Method Decorator
  4. Adding Logging Decorator
  5. Adding Authentication Decorator
  6. 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.

Image for post
Image for post
Empty project, running npm init -y
yarn add express body-parser
yarn add typescript @types/node @types/express ts-node -D
package.json
tsconfig.json
src/server.ts file. GitHub gist
index.ts file. GitHub gist
yarn run start
🚀 Server is running on port 3000
Image for post
Image for post
Terminal. Server is successfully launched on port 3000

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:

Added new API Route to the index.ts file. GitHub gist
Image for post
Image for post
Terminal. Application successfully re-ran on port 3000
Image for post
Image for post
Chrome Tab. URL localhost:3000/hello. Result — “Hello World” string

3. Async Method Decorator

Our previous example will not work with async code, let me demostrate you this issue.

Image for post
Image for post
Insomnia. No async response
routeConfig Typescript decorator. GitHub gist
Image for post
Image for post
GIF. Async data response in Insomnia after 2 seconds

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:

new “routeLog” Typescript decorator
Updated route method with new routeLog() decorator
Image for post
Image for post
Insomnia request data
Image for post
Image for post
Terminal results after logging user’s request data

5. Adding Authentication Decorator

Now we can add authentication decorator that will allow us to filter users:

routeAuth Typescript Decorator. GitHub gist
Updated route with new routeAuth decorator
Image for post
Image for post
Insomnia. Post request after adding auth decorator to express route
Image for post
Image for post
Terminal. Result with authorization header “Bearer 123”

6. Codesandbox Playground

I have created a codesandbox playgroud for you, so you could test is by yourself:

Image for post
Image for post

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store