Decorator factories
- TypeScript course
- Intermediate
- Lesson 47/89
- 4 min
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 {}.
Practice 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.
Starter code
// Etiketli fabrikasını yaz: etiket: string alır
// (ctor: any): any imzalı bir decorator döndürsün
// Decorator "etiket: " + etiket yazdırsın, ctor döndürsün
// Foo sınıfı yaz, selam metodu "merhaba" döndürsün
// Fabrikayı "demo" etiketiyle çağır, dönen decorator'u Foo'ya uygula
// DecoratedFoo'ya ata
// yeni örnek üzerinden selam metodunu çağır, sonucu yazdırSample 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());Expected output
etiket: demo merhaba
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does a decorator factory return?
- A string value
- A class instance
- A decorator function Correct answer
- A constructor function
Explanation: 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.
2 Factory parameter
function Etiketli(____): (ctor: any) => any {
return function(ctor: any): any {
console.log(etiket);
return ctor;
};
}function Etiketli(etiket: string): (ctor: any) => any {
return function(ctor: any): any {
console.log(etiket);
return ctor;
};
}Explanation: The factory takes the customization parameter (etiket). ctor is the inner decorator function's parameter; target and key belong to method/property decorators, not to the factory.
3 Factory parts
| Term | Meaning |
|---|---|
Etiketli("demo") |
Factory call |
return function(ctor) |
The returned decorator |
etiket: string |
Factory parameter |
Etiketli("demo")(Foo) |
Two-step application |