How to fix Decorator 'X' must be used on a class method in TypeScript

// Method decorator signature
function MethodDecorator(
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor  // ← Only methods have descriptors
): PropertyDescriptor | void;

// Property decorator signature (no descriptor)
function PropertyDecorator(
  target: any,
  propertyKey: string
): void;

class Example {
  // WRONG - @LogMethod expects a method, not a property
  @LogMethod
  name: string = "test";

  // CORRECT - @LogMethod decorates a method
  @LogMethod
  getName(): string {
    return this.name;
  }
}

// BEFORE - Error: @Debounce must be used on a class method
class SearchComponent {
  @Debounce(500)
  query: string = "";
}

// AFTER - Fixed by converting to method
class SearchComponent {
  private _query: string = "";

  @Debounce(500)
  setQuery(value: string): void {
    this._query = value;
  }

  getQuery(): string {
    return this._query;
  }
}

// BEFORE - Arrow function property
class Handler {
  @LogExecution
  process = (data: any) => {
    // Error: decorators can't be used on arrow function properties
  };
}

// AFTER - Regular method
class Handler {
  @LogExecution
  process(data: any) {
    return data;
  }
}

// For properties, use property decorators
function PropertyLogger(target: any, propertyKey: string) {
  console.log(`Property: ${propertyKey}`);
}

// For methods, use method decorators
function MethodLogger(
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey}`);
    return originalMethod.apply(this, args);
  };
}

class Example {
  @PropertyLogger  // ✓ Property decorator on property
  name: string = "test";

  @MethodLogger    // ✓ Method decorator on method
  greet(): void {
    console.log(`Hello ${this.name}`);
  }
}

// NestJS example
import { Controller, Get, Post } from '@nestjs/common';

@Controller('users')  // ✓ Class decorator on class
class UserController {
  @Get()              // ✓ Method decorator on method
  findAll() {
    return [];
  }

  // WRONG - @Get() on property
  // @Get()
  // users = [];
}

// WRONG - Decorators not allowed on class expressions
const MyClass = @Injectable class {
  @LogMethod
  doSomething() {}
};

// CORRECT - Use class declaration
@Injectable
class MyClass {
  @LogMethod
  doSomething() {}
}

// If you need to export as const, do it separately
export const MyServiceInstance = MyClass;

// BEFORE - Won't work
function createService() {
  return @Service class ServiceImpl {
    @Cached
    getData() {}
  };
}

// AFTER - Declare class first
@Service
class ServiceImpl {
  @Cached
  getData() {}
}

function createService() {
  return ServiceImpl;
}

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,  // If using reflection
    "target": "ES2015"
  }
}

{
  "compilerOptions": {
    // No experimentalDecorators flag needed for stage 3 decorators
    "target": "ES2022"
  }
}

// Method decorator - includes descriptor parameter
export function LogMethod(
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor
): PropertyDescriptor {
  const originalMethod = descriptor.value;

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

  return descriptor;
}

// Property decorator - NO descriptor parameter
export function DefaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let currentValue = value;

    Object.defineProperty(target, propertyKey, {
      get() {
        return currentValue;
      },
      set(newValue) {
        currentValue = newValue;
      },
      enumerable: true,
      configurable: true,
    });
  };
}

// Usage
class Example {
  @DefaultValue("Unknown")  // ✓ Property decorator
  name: string;

  @LogMethod                // ✓ Method decorator
  getName(): string {
    return this.name;
  }
}