How to fix Decorator cannot be applied to this kind of declaration in TypeScript

// WRONG - decorators don't work on standalone functions
@Log
function calculateTotal(price: number): number {
  return price * 1.1;
}
// Error: Decorator cannot be applied to this kind of declaration

// CORRECT - use a class method instead
class Calculator {
  @Log
  calculateTotal(price: number): number {
    return price * 1.1;
  }
}

class MathUtils {
  @Measure
  static calculatePercentage(value: number, total: number): number {
    return (value / total) * 100;
  }
}

// Usage
const result = MathUtils.calculatePercentage(45, 200);

// WRONG - interfaces are compile-time only
@Serializable
interface User {
  name: string;
  email: string;
}
// Error: Decorator cannot be applied to this kind of declaration

// CORRECT - use a class instead
@Serializable
class User {
  name: string;
  email: string;

  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }
}

// Define interface for type checking
interface IUser {
  name: string;
  email: string;
}

// Implement with decoratable class
@Serializable
class User implements IUser {
  constructor(
    public name: string,
    public email: string
  ) {}
}

// WRONG - can't decorate variables
@Observable
const counter = 0;
// Error: Decorator cannot be applied to this kind of declaration

// CORRECT - use class property
class AppState {
  @Observable
  counter = 0;

  @Observable
  private userName = "";
}

class Store {
  @Track
  private items: string[] = [];

  @Computed
  get itemCount(): number {
    return this.items.length;
  }

  @Action
  addItem(item: string): void {
    this.items.push(item);
  }
}

// WRONG - standalone function parameter
function greet(@Validate name: string) {
  console.log(`Hello, ${name}`);
}
// Error: Decorator cannot be applied to this kind of declaration

// CORRECT - class method parameter
class Greeter {
  greet(@Validate name: string) {
    console.log(`Hello, ${name}`);
  }
}

class UserService {
  constructor(
    @Inject('Database') private db: Database,
    @Inject('Logger') private logger: Logger
  ) {}

  async findUser(@ValidateId userId: string) {
    return this.db.query('users', userId);
  }
}

// tsconfig.json - Using experimental decorators (legacy)
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

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

// Use 'accessor' keyword for auto-accessors
class Example {
  @tracked accessor count = 0;  // Standard decorator syntax
}

// WRONG - in a .d.ts file
declare class User {
  @Validate
  name: string;
}
// Error: Decorator cannot be applied to this kind of declaration

// CORRECT - remove decorators from declaration files
declare class User {
  name: string;
}

// types.d.ts - declarations only
declare class User {
  name: string;
  validate(): boolean;
}

// user.ts - implementation with decorators
export class User {
  @Length(3, 50)
  name: string;

  @Validate
  validate(): boolean {
    // implementation
    return true;
  }
}