TypeScript Decorators Cheat Sheet

Covers enabling legacy experimental decorators, writing class, method, property, and parameter decorators, and their execution order.

2 PagesAdvancedMar 28, 2026

Enabling Decorators (tsconfig.json)

Legacy decorators must be turned on explicitly in the compiler options.

json

{  "compilerOptions": {    "target": "ES2020",    "experimentalDecorators": true,    "emitDecoratorMetadata": true  }}

Class Decorators

Wrap or extend a class definition using a decorator factory.

typescript

function Logger(prefix: string) {  // decorator factory - returns the actual decorator  return function <T extends { new (...args: any[]): {} }>(constructor: T) {    return class extends constructor {      createdAt = new Date();      constructor(...args: any[]) {        super(...args);        console.log(`${prefix}: instance created`);      }    };  };}@Logger('UserService')class UserService {  constructor(public name: string) {}}

Method & Property Decorators

Intercept method calls or mark properties using the descriptor API.

typescript

function LogCall(target: any, key: string, descriptor: PropertyDescriptor) {  const original = descriptor.value;  descriptor.value = function (...args: any[]) {    console.log(`Calling ${key} with`, args);    return original.apply(this, args); // preserve original behavior  };  return descriptor;}class Calculator {  @LogCall  add(a: number, b: number) {    return a + b;  }}// Property decorator - receives target and property key onlyfunction Required(target: any, propertyKey: string) {  // typically used with reflect-metadata to store validation rules}

Parameter Decorators

Tag individual method parameters, commonly used for DI frameworks.

typescript

function LogParam(target: any, methodName: string, paramIndex: number) {  console.log(`Param ${paramIndex} of ${methodName} decorated`);}class Greeter {  greet(@LogParam name: string) {    return `Hello, ${name}`;  }}

Decorator Kinds & Execution Order

The five decorator targets and how they're applied.

Class decorator- Applied to the constructor; can replace/extend the class definition
Method decorator- Receives (target, propertyKey, descriptor); can wrap or replace the method
Accessor decorator- Applies to a get/set pair, same signature as method decorators
Property decorator- Receives (target, propertyKey) only, no descriptor
Parameter decorator- Receives (target, propertyKey, parameterIndex)
Evaluation order- Parameter/method/accessor/property decorators run before class decorators, bottom-up within a declaration
Decorator factory- A function that returns a decorator, allowing arguments like @Logger('X')

Pro Tip

Legacy TS decorators (experimentalDecorators) and the new TC39 Stage 3 decorators (default in TS 5.0+ without the flag) have different signatures and are not interchangeable - check your tsconfig before copying decorator code from another project.

Was this cheat sheet helpful?

TypeScript Advanced Types Cheat Sheet

TypeScript Generics Deep Dive Cheat Sheet