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

What this error means

The "Decorator cannot be applied to this kind of declaration" error appears when you attempt to use a decorator on an unsupported construct. TypeScript decorators are special declarations that can modify or observe classes and class members, but they have strict limitations about where they can be used. TypeScript supports five types of decorators, each with specific rules: 1. **Class decorators** - Applied to class declarations 2. **Method decorators** - Applied to class methods 3. **Accessor decorators** - Applied to getters/setters 4. **Property decorators** - Applied to class properties 5. **Parameter decorators** - Applied to method or constructor parameters You cannot apply decorators to standalone functions, arrow functions, interfaces, type aliases, variable declarations, function parameters (outside of class contexts), or exported namespace members. Additionally, decorators cannot be used in ambient contexts like declaration files (.d.ts) or declare blocks. The most common mistake is attempting to decorate a standalone function instead of a class method, or trying to use decorators on constructs that only exist at compile-time (like interfaces and type aliases).

Typical symptoms

• Compilation fails with 'Decorator cannot be applied to this kind of declaration'
• Decorators on standalone functions trigger errors
• Attempting to decorate interfaces or type aliases fails
• Decorators on arrow functions are rejected by the compiler
• Trying to use parameter decorators on standalone functions causes errors
• Decorators in .d.ts declaration files produce compilation errors

Common causes

1. Attempting to decorate a standalone function instead of a class method
2. Trying to apply decorators to interfaces or type aliases
3. Using decorators on arrow function expressions
4. Applying decorators to variable declarations or constants
5. Attempting to use parameter decorators on non-class function parameters
6. Decorating exported namespace members inappropriately
7. Using decorators in ambient contexts (declaration files or declare blocks)
8. Applying method decorators to function overload signatures instead of the implementation

How to fix "Decorator cannot be applied to this kind of declaration"

// 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;
  }
}

Advanced notes

# Search for parameter decorators in your codebase
grep -r "@.*(" src/ | grep "parameter"

@ClassDecorator
class Example {
  @PropertyDecorator
  prop = 1;

  @MethodDecorator
  method(@ParamDecorator arg: string) {}

  constructor(@ParamDecorator param: number) {}
}

// Execution order:
// 1. @ParamDecorator (on method parameter)
// 2. @MethodDecorator
// 3. @PropertyDecorator
// 4. @ParamDecorator (on constructor parameter)
// 5. @ClassDecorator

// Decorator-style wrapper for standalone functions
function measurePerformance<T extends (...args: any[]) => any>(
  fn: T
): T {
  return ((...args: any[]) => {
    const start = performance.now();
    const result = fn(...args);
    const end = performance.now();
    console.log(`Execution time: ${end - start}ms`);
    return result;
  }) as T;
}

// Usage
const calculateTotal = measurePerformance((price: number) => {
  return price * 1.1;
});

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello</h1>'
})
export class AppComponent {}

@Controller('users')
export class UsersController {
  @Get(':id')
  findOne(@Param('id') id: string) {
    return `User #${id}`;
  }
}

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;
}

npx tsc --showConfig | grep -i decorator
npx tsc --listFiles | grep decorator

function DebugDecorator(target: any, propertyKey?: string, descriptor?: PropertyDescriptor) {
  console.log('Decorator applied to:', target, propertyKey, descriptor);
}

Frequently asked questions

What does "Decorator cannot be applied to this kind of declaration" mean?

The "Decorator cannot be applied to this kind of declaration" error appears when you attempt to use a decorator on an unsupported construct. TypeScript decorators are special declarations that can modify or observe classes and class members, but they have strict limitations about where they can be used. TypeScript supports five types of decorators, each with specific rules: 1.

How do I fix "Decorator cannot be applied to this kind of declaration"?

This error occurs when you try to apply a TypeScript decorator to a language construct that doesn't support decorators. Decorators can only be applied to classes, methods, accessors, properties, and parameters—not to standalone functions, interfaces, type aliases, or variables.

What causes "Decorator cannot be applied to this kind of declaration"?

Attempting to decorate a standalone function instead of a class method Trying to apply decorators to interfaces or type aliases Using decorators on arrow function expressions

Is the "Decorator cannot be applied to this kind of declaration" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• The return type of a parameter decorator function must be either 'void' or 'any'

  The return type of a parameter decorator function must be either 'void' or 'any'

  MEDIUM

• Decorator factory must return a function

  Decorator factory must return a function

  MEDIUM

• Decorators are not valid here

  How to fix 'Decorators are not valid here' error in TypeScript

  MEDIUM

• Decorator 'X' must be used on a class method

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

  MEDIUM

• Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

  How to fix "Cannot find name 'process'" in TypeScript

  MEDIUM

• Module has no exported member 'X'

  How to fix 'Module has no exported member X' error in TypeScript

  MEDIUM

Official resources & further reading

• 📚TypeScript Official Documentation
• 📖
  TypeScript Handbook - Decorators(Official Docs)
• 📖
  TypeScript 5.0 - Standard Decorators(Official Docs)
• 📖
  TypeScript TSConfig - experimentalDecorators(Official Docs)
• DigitalOcean - How to Use Decorators in TypeScript
• LogRocket - Practical Guide to TypeScript Decorators
• Complete Guide to TypeScript Decorators
• 🐙
  TypeScript GitHub - Decorator Type Error Improvements(GitHub)
• Refine - TypeScript Decorators in Brief