Stop 04 · JavaScript & TypeScript for BackendTopics · 12/12

Decorators (Basics)

In short

In NestJS you'll see @Controller() and @Get() above classes and methods. Those are decorators: small labels that add behaviour without changing the code inside.

An experimental TypeScript feature that lets you annotate classes and methods with metadata (`@Controller`, `@Get`) — the syntax that frameworks like NestJS build their entire API around.

The mascot wraps a plain box in violet paper and ties a big ribbon bow on top.

Think of it like this

Wrapping a gift

You buy a plain box and wrap it in shiny paper with a ribbon. The gift inside is the same; it just gets extra presentation. A decorator wraps a class or method the same way, adding logging, timing or routing without touching its body.

Watch it happen

A call to a decorated method

Call

@Log wrapper

Original

@Log after

Result

1/5Your code calls orderService.place(cart).

The big ideas

What you need to know

@ plus a function

A decorator is just a function. @Log above a method means: pass this method through Log first.

Wraps, doesn't edit

The method body stays clean. Cross-cutting jobs like logging, caching or auth live in one reusable place.

Two flavours exist

TypeScript 5 supports standard decorators. NestJS and some ORMs still use the older experimentalDecorators setting.

Where you'll meet them

NestJS (@Controller, @Get), TypeORM (@Entity, @Column) and class-validator (@IsEmail).

See it in code

Walk through the code

1function log(original: any, context: ClassMethodDecoratorContext) {2  const name = String(context.name);3  return function (this: any, ...args: any[]) {4    console.log(`-> ${name}`, args);5    const start = performance.now();6    const result = original.call(this, ...args);7    console.log(`<- ${name} ${(performance.now() - start).toFixed(1)}ms`);8    return result;9  };10}11 12class OrderService {13  @log14  place(items: string[]) { return { id: "o1", items }; }15}16new OrderService().place(["chai", "samosa"]);

1/4A method decorator receives the original method and some context, like its name.

This uses standard TypeScript 5 decorators, with no tsconfig flag needed. NestJS projects use experimentalDecorators instead, and the signature looks a bit different.

Save yourself the pain

Common mistakes

Oops

Copy-pasting decorator code from an old blog into a project with different settings.

Do this instead

Check whether the project uses experimentalDecorators. The two styles have different function signatures.

Oops

Hiding important business logic inside decorators.

Do this instead

Keep decorators for cross-cutting jobs like logging or auth. Core logic should be visible in the method.

Your mission

Write a timing decorator

~25 min

Quick check

What does a method decorator like @log actually do?

Go deeper

1Read a few `@Decorator` examples from a NestJS controller and guess what each does.
2Understand decorators are mostly a framework-level feature — you'll consume them more than write your own early on.
3Enable the `experimentalDecorators` tsconfig option to try one yourself.