How to fix Decorators are not valid here in TypeScript

// WRONG - decorator on class expression
const MyClass = @Component({
  selector: 'app-root'
})
class { }
// Error: Decorators are not valid here

// CORRECT - decorator on class declaration
@Component({
  selector: 'app-root'
})
class MyClass { }

// Or if you need the variable assignment
@Component({
  selector: 'app-root'
})
class MyClassDeclaration { }
const MyClass = MyClassDeclaration;

// WRONG - class expression with decorator
export const AppComponent = @Component({
  selector: 'app-root'
})
class { }

// CORRECT - declare class first, then export
@Component({
  selector: 'app-root'
})
export class AppComponent { }

// WRONG - decorator on nested class
const services = {
  UserService: @Injectable()
  class {
    getUser() { }
  }
};
// Error: Decorators are not valid here

// CORRECT - extract to top level
@Injectable()
class UserService {
  getUser() { }
}

const services = {
  UserService
};

// WRONG - decorator on anonymous returned class
function createService() {
  return @Injectable()
  class {
    getData() { }
  };
}

// CORRECT - declare class with name first
@Injectable()
class DataService {
  getData() { }
}

function createService() {
  return DataService;
}

// WRONG - decorator on anonymous class in mixin
const TimestampMixin = (Base: any) => {
  return @Entity()
  class extends Base {
    @Column()
    createdAt: Date;
  };
};
// Error: Decorators are not valid here on the inner class

// CORRECT - declare named class
const TimestampMixin = (Base: any) => {
  @Entity()
  class Timestamped extends Base {
    @Column()
    createdAt: Date;
  }
  return Timestamped;
};

// Apply decorator to the final composed class
function applyTimestamp<T extends { new(...args: any[]): {} }>(Base: T) {
  return class extends Base {
    createdAt: Date = new Date();
  };
}

@Entity()
class User extends applyTimestamp(BaseEntity) {
  @Column()
  name: string;
}

// WRONG - decorator on instantiated class
export default new @Singleton()
class ApiClient {
  @Log()
  fetch() { }
}
// Error: Decorators are not valid here

// CORRECT - declare class separately, then instantiate
@Singleton()
class ApiClient {
  @Log()
  fetch() { }
}

export default new ApiClient();

// Declare decorated class
@Injectable()
class ConfigService {
  private config: Config;

  @Cache()
  getConfig() {
    return this.config;
  }
}

// Export instance separately
export const configService = new ConfigService();

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true  // Often needed with DI frameworks
  }
}

// tsconfig.json - stage 3 decorators work without flag
{
  "compilerOptions": {
    "target": "ES2022",
    // experimentalDecorators is NOT needed for stage 3 decorators
  }
}

// VALID decorator targets:

// 1. Class declarations
@Component()
class MyComponent { }

// 2. Class methods
class Service {
  @Log()
  fetchData() { }
}

// 3. Class properties
class User {
  @Column()
  name: string;
}

// 4. Method parameters
class Controller {
  create(@Body() dto: CreateDto) { }
}

// 5. Accessors (getters/setters)
class Person {
  @Validate()
  get age() { return this._age; }
}

// INVALID decorator targets:

// Standalone functions - NOT SUPPORTED
@Log()  // Error
function fetchData() { }

// Interfaces - NOT SUPPORTED
@Entity()  // Error
interface User { }

// Type aliases - NOT SUPPORTED
@Serializable()  // Error
type Config = { };