What are Decorators?
Decorators are special functions that can modify classes, methods, properties, and parameters. They use the @ syntax and are widely used in frameworks like Angular and NestJS.
Example
// Enable in tsconfig.json:
// "experimentalDecorators": true
// Class decorator
function Logger(constructor: Function) {
console.log(`Creating instance of: ${constructor.name}`);
}
@Logger
class UserService {
getUsers() {
return ["Alice", "Bob"];
}
}
// Output: "Creating instance of: UserService"Decorator Factories
Decorator factories are functions that return decorators, allowing you to pass configuration options.
Example
// Decorator factory
function Component(config: { selector: string; template: string }) {
return function(constructor: Function) {
console.log(`Registering component: ${config.selector}`);
};
}
@Component({
selector: "app-header",
template: "<h1>Hello</h1>"
})
class HeaderComponent {
title = "My App";
}
// Method decorator
function Log(target: any, name: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${name} with`, args);
return original.apply(this, args);
};
}