What is a decorator?

Learn what class decorators are.

What is a decorator?

A decorator is a function that annotates and modifies a class, method, or property. A class decorator is written as @Name right above the class declaration and receives the constructor function. The returned value (if any) replaces the class.

@Logged
class Foo {
  selam() { return "merhaba"; }
}

A decorator is a higher-order function

A decorator is essentially a higher-order function. Writing @Logged class Foo {} is equivalent to passing the Foo class to the Logged function. The decorator receives the constructor and returns it as-is or modified.

// equivalent to @Logged class Foo {}:
const Foo = Logged(class Foo {
  selam() { return "merhaba"; }
});

Exercise Write a class decorator

Write a class decorator Logged that takes a ctor parameter, prints "sınıf hazır" with console.log, and returns ctor. Define class Foo with a selam method returning "merhaba". Apply the decorator manually by calling Logged with Foo and assigning the result to a variable LoggedFoo. Call the selam method on a new instance of the resulting class and print the result with console.log.

Show example solution

function Logged(ctor: any): any {
  console.log("sınıf hazır");
  return ctor;
}

class Foo {
  selam(): string {
    return "merhaba";
  }
}

const LoggedFoo = Logged(Foo);
console.log(new LoggedFoo().selam());

Test yourself

How many arguments does a class decorator take and what is it?
- The constructor function (1 argument)
- An instance of the class (1 argument)
- A method descriptor object (1 argument)
- A property name (1 argument)
Show answer

The constructor function (1 argument) — A class decorator takes one argument: the class's constructor function. Instance, method descriptor, and property name are arguments of other decorator kinds.

Return the constructor

function Logged(ctor: any): any {
  console.log("sınıf hazır");
  return ____;
}

Show answer

function Logged(ctor: any): any {
  console.log("sınıf hazır");
  return ctor;
}

Class decorator parts

@Logged

Decorator marker and name
class Foo

The decorated class
function Logged(ctor)

Decorator function definition
return ctor

Returning the constructor

Next lesson: Method decorator

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies