TypeScript Decorators — Complete Interview Guide

Decorator Basics and Configuration

Decorators are currently a Stage 3 TC39 proposal. TypeScript supports both the legacy experimental decorators (widely used, requires experimentalDecorators: true) and the newer Stage 3 decorators. Most production frameworks (NestJS, Angular, MobX) use the legacy form. This guide covers the legacy form since it dominates interview contexts:

// tsconfig.json — required for legacy decorators
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true  // required for reflect-metadata
  }
}

// A decorator is a function — it receives the decorated target as its argument
function Log(target: Function) {
  console.log(`Class defined: ${target.name}`);
}

@Log
class UserService {
  // Log runs at class definition time, once, when this module loads
  // NOT when new UserService() is called
}

Class Decorators

// Class decorator — receives the constructor function
// Can return a new constructor to replace the original class
type Constructor<T = {}> = new (...args: any[]) => T;

function Singleton<T extends Constructor>(Base: T) {
  let instance: InstanceType<T> | null = null;
  return class extends Base {
    constructor(...args: any[]) {
      if (instance) return instance as any;
      super(...args);
      instance = this as any;
    }
  };
}

@Singleton
class DatabaseConnection {
  connect() { /* ... */ }
}

const a = new DatabaseConnection();
const b = new DatabaseConnection();
console.log(a === b); // true — same instance

Method Decorators

// Method decorator receives: target (prototype), key (method name), descriptor
function Memoize(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
): PropertyDescriptor {
  const original = descriptor.value;
  const cache = new Map<string, any>();

  descriptor.value = function(...args: any[]) {
    const cacheKey = JSON.stringify(args);
    if (cache.has(cacheKey)) {
      return cache.get(cacheKey);
    }
    const result = original.apply(this, args);
    cache.set(cacheKey, result);
    return result;
  };

  return descriptor;
}

class MathService {
  @Memoize
  fibonacci(n: number): number {
    if (n <= 1) return n;
    return this.fibonacci(n - 1) + this.fibonacci(n - 2);
  }
}

// Logging decorator — a real-world pattern
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${key} with`, args);
    const result = original.apply(this, args);
    console.log(`${key} returned`, result);
    return result;
  };
  return descriptor;
}

Decorator Factories

A decorator factory is a function that returns a decorator — allowing the decorator to be parameterized:

// Factory — outer function takes config, returns the actual decorator
function Throttle(ms: number) {
  return function(target: any, key: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    let lastCall = 0;
    descriptor.value = function(...args: any[]) {
      const now = Date.now();
      if (now - lastCall >= ms) {
        lastCall = now;
        return original.apply(this, args);
      }
    };
    return descriptor;
  };
}

class SearchService {
  @Throttle(300)  // Decorator factory — passes 300 to the outer function
  search(query: string) { /* ... */ }
}

// NestJS uses decorator factories extensively:
// @Controller('users')
// @Get(':id')
// @Body(), @Param('id'), @Injectable()
// All of these are decorator factories returning the actual decorator

Property and Parameter Decorators

// Property decorator — receives target and property key
// Cannot directly modify the property (no descriptor provided)
// Typically used with reflect-metadata to record metadata
function Required(target: any, key: string) {
  const metadata: string[] = Reflect.getMetadata("required", target) || [];
  metadata.push(key);
  Reflect.defineMetadata("required", metadata, target);
}

// Parameter decorator — receives target, method name, and parameter index
function ValidateId(target: any, key: string, index: number) {
  // Marks the parameter at 'index' in method 'key' for validation
  const params: number[] = Reflect.getMetadata("validateId", target, key) || [];
  params.push(index);
  Reflect.defineMetadata("validateId", params, target, key);
}

class UserController {
  @Required
  name: string = "";

  getUser(@ValidateId id: string) {
    return users.find(u => u.id === id);
  }
}

Decorator Execution Order

// 1. Parameter decorators evaluated bottom-up, then
// 2. Method/accessor/property decorators evaluated bottom-up, then
// 3. Parameter decorators for constructor, then
// 4. Class decorator evaluated last

@ClassDec          // Runs 4th
class Example {
  @PropDec         // Runs 3rd
  value: string;

  @MethodDec1      // Runs 2nd (outer)
  @MethodDec2      // Runs 1st (inner — applied closer to method first)
  method(@ParamDec param: string) {}
}

// The general rule: innermost decorator runs first, class decorator runs last