Understanding TypeScript Decorators: A Hands‑On Guide

If you’ve ever stumbled upon the @ symbol in a TypeScript file and wondered what magic it hides, you’re not alone. Decorators are a way to tack extra behavior or metadata onto classes, methods, properties, or accessors without cluttering the core logic.

In plain English, a decorator is just a function that gets called with some information about the thing it decorates. It can then decide to modify that thing, wrap it, or simply observe what happens. Since TypeScript 5.0, the language follows the modern ECMAScript decorator proposal, which means the syntax you see today is becoming the standard for JavaScript as well.

How does the syntax look? Very straightforward. You write a function that receives a target (the thing being decorated) and a context object, then you prepend the function name with @ before the declaration.

Here’s the skeleton:

function myDecorator(target: any, context: any) { // decorator logic goes here } @myDecorator class Example { // … }

Now let’s dive into concrete scenarios.

Method Decorator – Logging Around a Call

A method decorator can wrap a function, letting you run code before or after the original method. The example below logs when the method starts and when it finishes.

function logMethod(target: Function, context: ClassMethodDecoratorContext) { const name = String(context.name); return function (this: any, ...args: any[]) { console.log(`${name} starts`); const result = target.apply(this, args); console.log(`${name} ends`); return result; }; } class User { constructor(private name: string) {} @logMethod welcome() { console.log(`Hello, ${this.name}!`); } } const user = new User('Alen'); user.welcome();

Running this prints:

welcome starts Hello, Alen! welcome ends

Notice how the original welcome method stays untouched – the decorator just adds a thin wrapper around it.

Class Decorator – Adding a Property on the Fly

Class decorators receive the constructor function. They can return a new constructor that extends the original, effectively augmenting the class.

function AddVersion(ctor: T) { return class extends ctor { version = '1.0'; }; } @AddVersion class Product { constructor(public name: string) {} } const product = new Product('Laptop'); console.log(product.name); // Laptop console.log(product.version); // 1.0

After decoration, every Product instance carries a version property that never existed in the original class definition.

Decorator Factories – Parameterised Magic

Often you want a decorator that can be customised. That’s where a decorator factory comes in: a function that takes arguments and returns the actual decorator.

function log(prefix: string) { return function (target: Function, context: ClassMethodDecoratorContext) { const name = String(context.name); return function (this: any, ...args: any[]) { console.log(`${prefix} ${name}`); return target.apply(this, args); }; }; } class User { @log('Calling:') greet() { console.log('Hello!'); } } new User().greet();

The console now shows:

Calling: greet Hello!

Because the decorator was created with the 'Calling:' prefix, we get a nice, reusable logging wrapper.

Decorator Composition – Stacking Multiple Behaviors

You can layer several decorators on the same class or method. The evaluation order follows a bottom‑to‑top rule, much like function composition in mathematics.

@first @second class Example { // … }

In this case, second runs first, returning a new descriptor that first then receives. This predictable order lets you build complex pipelines out of tiny, focused decorators.

All in all, decorators give you a clean way to separate cross‑cutting concerns—logging, validation, memoisation, you name it—from the business logic. They keep code readable, reusable, and, frankly, a lot more fun to work with.