Top 10 Must-Know TypeScript Decorators for Developers

TypeScript decorators are powerful tools that allow developers to extend functionality in a clean and reusable way. Whether you’re measuring execution time, implementing throttling, or ensuring methods execute only once, decorators can significantly enhance your workflow. In this blog, we’ll explore ten essential decorators for everyday TypeScript development.

Installation

To get started, install the helpful-decorators package:

npm install helpful-decorators

or

yarn add helpful-decorators

1. @delay - Add a Delay to a Method

If you need to introduce a delay before executing a function, use @delay.

import { delay } from 'helpful-decorators';

class Test {
  @delay(1000)
  method() {
    console.log("Executed after 1 second");
  }
}

2. @debounce - Prevent Rapid Function Execution

Debouncing ensures that a function is called only after a specified delay from the last call.

import { debounce } from 'helpful-decorators';

class Test {
  @debounce(1000)
  method() {
    console.log("Executed after 1 second of inactivity");
  }
}

3. @throttle - Control Execution Frequency

Throttle ensures that a function executes at most once in a specified time interval.

import { throttle } from 'helpful-decorators';

class Test {
  @throttle(1000)
  method() {
    console.log("Executed at most once per second");
  }
}

4. @once - Ensure a Method Runs Only Once

This decorator prevents a method from executing more than once.

import { once } from 'helpful-decorators';

class Test {
  @once
  method() {
    console.log("This will run only once");
  }
}

5. @measure - Measure Execution Time

This is useful for profiling performance.

import { measure } from 'helpful-decorators';

class Test {
  @measure
  doSomething() {
    console.log("Measuring execution time");
  }
}

6. @Mixin - Achieve Multiple Inheritance

Allows multiple inheritance in TypeScript.

import { Mixin } from 'helpful-decorators';

class Disposable {}
class Activatable {}

@Mixin([Disposable, Activatable])
class Test {}

7. @memo - Cache Function Results

Caches results to optimize performance.

import { memo } from 'helpful-decorators';

class Test {
  @memo()
  method() {
    return "Memoized Result";
  }
}

8. @bind - Automatically Bind Methods

Ensures this retains the correct context.

import { bind } from 'helpful-decorators';

class AppComponent {
  constructor() {
    document.body.addEventListener('click', this.onClick);
  }

  @bind
  onClick(event) {
    console.log(event);
  }
}

9. @SortBy - Sort Arrays Automatically

Sorts arrays based on a specific property or type.

import { SortBy } from 'helpful-decorators';

class Test {
  @SortBy('name', { isDescending: false, type: 'string' })
  names = [ { name: 'b' }, { name: 'a' }, { name: 'c' } ];
}

10. @Log - Log Method Calls (Custom Decorator Example)

This decorator logs function calls for debugging.

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} called with args:`, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Test {
  @Log
  sayHello(name: string) {
    return `Hello, ${name}`;
  }
}

Conclusion

Using decorators in TypeScript helps simplify complex logic, improves readability, and enhances maintainability. These ten decorators can significantly improve your daily workflow, whether you’re dealing with performance optimization, event handling, or debugging.

Happy coding!