How to fix Class decorator must be used on a class declaration in TypeScript

The most common cause is using a class expression instead of a class declaration. Move the class outside any expression context and define it as a standalone statement.

Bad - Class expression with decorator:

@Logger
const MyClass = class {
  name = "MyClass";
};

Good - Class declaration with decorator:

@Logger
class MyClass {
  name = "MyClass";
}

The key difference is that class MyClass { } is a declaration, while const MyClass = class { } is an expression assigned to a variable. TypeScript decorators only work with the declaration syntax.

If you're exporting a class as an expression, convert it to a declaration before applying the decorator.

Bad - Exporting class expression with decorator:

@Logger
export const MyClass = class {
  getData() {
    return "data";
  }
};

Good - Exporting class declaration with decorator:

@Logger
class MyClass {
  getData() {
    return "data";
  }
}

export default MyClass;
// OR
export { MyClass };

You can still export the decorated class normally; just make sure the decorator is applied to the declaration, not the expression.

Ensure that decorators are enabled in your TypeScript configuration. Even though modern TypeScript treats decorators as default syntax for declarations, you may need to explicitly enable experimental support depending on your setup.

tsconfig.json:

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

The experimentalDecorators option enables decorator syntax, and emitDecoratorMetadata allows libraries like NestJS and TypeORM to use reflection metadata. After changing tsconfig.json, restart your TypeScript server or IDE.

If you're defining a class inside a function or trying to apply decorators to classes in conditional contexts, move the class to the module level.

Bad - Class defined inside function with decorator:

function createClass() {
  @Logger  // ❌ Decorator in function context
  class MyClass {
    value = 42;
  }
  return MyClass;
}

Good - Class at module level:

@Logger
class MyClass {
  value = 42;
}

function createClass() {
  return MyClass;
}

If you need dynamic class creation, consider using factory functions that return instances of pre-declared decorated classes instead of defining new classes conditionally.

Decorators cannot be applied to interfaces or type aliases because they don't exist at runtime. Use concrete class declarations instead.

Bad - Decorator on interface:

@Logger  // ❌ Interfaces don't support decorators
interface IMyClass {
  getData(): string;
}

Bad - Decorator on type:

@Logger  // ❌ Types don't support decorators
type MyType = {
  name: string;
};

Good - Use a class instead:

@Logger
class MyClass {
  name: string;
  
  getData(): string {
    return this.name;
  }
}

If you only need the interface for type checking, use both: a decorated class and an interface that extends it or documents its contract.

If you're trying to use decorators with mixins (returning class expressions from functions), refactor to apply decorators to the concrete class instead.

Bad - Decorator on mixin pattern:

function applyTimestamp<T extends { new(...args: any[]): {} }>(Base: T) {
  @Logger  // ❌ Cannot decorate the return value
  return class extends Base {
    timestamp = new Date();
  };
}

Good - Declare and decorate the final class:

// Create the class separately
class TimestampedClass extends BaseClass {
  timestamp = new Date();
}

// Then decorate it
@Logger
class MyClass extends TimestampedClass {
  name = "MyClass";
}

Alternatively, use factory functions that return instances of properly decorated classes.

Decorators cannot be used in declare statements or .d.ts files. If you're working in a declaration file, move the decorated class to a regular .ts implementation file.

Bad - Decorator in .d.ts file:

// types.d.ts
@Logger  // ❌ Cannot use decorators in declaration files
declare class MyClass {
  getData(): string;
}

Good - Implementation in .ts file:

// myclass.ts
@Logger
class MyClass {
  getData(): string {
    return "data";
  }
}

export { MyClass };

Declaration files are for type information only and don't execute decorators. Keep decorated classes in implementation files and export their types as needed.