Decorator factories

Learn parameterized decorators.

Decorator factories

A decorator factory is a function that returns a decorator. It lets you customize the decorator with parameters: @Etiketli("demo") class Foo {}. Here Etiketli("demo") is called first, then the returned decorator function is applied to the class. This way you can reuse the same decorator with different parameters.

function Etiketli(etiket: string) {
  return function(ctor: any): any {
    console.log(etiket);
    return ctor;
  };
}

@Etiketli("demo")
class Foo {}

Two-step call

Using a factory is two-step: first the factory is called with parameters and returns a decorator; then that decorator is applied to the target. Writing Etiketli("demo")(Foo) applies the decorator returned by Etiketli("demo") to Foo. This is equivalent to @Etiketli("demo") class Foo {}.

Exercise Write an Etiketli factory

Write the Etiketli factory taking (etiket: string) and returning a decorator function with signature (ctor: any): any. The returned decorator prints console.log("etiket: " + etiket) and returns ctor. Write class Foo with a selam method returning "merhaba". Call the factory with the "demo" label, then apply the returned decorator to the Foo class in two steps, assigning the result to DecoratedFoo. Call the greeting method on a new instance of the resulting class and print the result.

Show example solution

function Etiketli(etiket: string): (ctor: any) => any {
  return function(ctor: any): any {
    console.log("etiket: " + etiket);
    return ctor;
  };
}

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

const DecoratedFoo = Etiketli("demo")(Foo);
console.log(new DecoratedFoo().selam());

Test yourself

What does a decorator factory return?
- A string value
- A class instance
- A decorator function
- A constructor function
Show answer

A decorator function — The factory returns a decorator; the returned decorator is then applied to the target. It does not return an instance, a string, or a constructor; those are parts of the decorator's target, not the decorator itself.

Factory parameter

function Etiketli(____): (ctor: any) => any {
  return function(ctor: any): any {
    console.log(etiket);
    return ctor;
  };
}

Show answer

function Etiketli(etiket: string): (ctor: any) => any {
  return function(ctor: any): any {
    console.log(etiket);
    return ctor;
  };
}

Factory parts

Etiketli("demo")

Factory call
return function(ctor)

The returned decorator
etiket: string

Factory parameter
Etiketli("demo")(Foo)

Two-step application

Next lesson: Summary - Decorators

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies