In this article, we'll take a dive into decorators in TypeScript, explore their types, and provide practical examples to help you harness their full potential.
What Are Decorators? 🎨
At their core, decorators are simply functions that are applied to classes, methods, properties, or parameters using the @ symbol. They can be used for various purposes, including:
- Logging and debugging: Adding logging statements before and after method execution.
- Validation: Checking the validity of inputs or outputs.
- Authorization: Controlling access to certain methods or routes.
- Memoization: Caching the results of expensive operations.
- Dependency Injection: Automatically injecting dependencies into classes.
- Metadata Collection: Storing additional information about classes or properties.
Class Decorators 🏛️
Class decorators are applied to classes. They receive the class constructor as their only parameter and can be used to modify the class or add metadata to it.
function MyDecorator(target: Function) {
console.log('Class decorator called on', target);
}
@MyDecorator
class MyClass {
constructor() {
console.log('MyClass constructor');
}
}
// Output:
// Class decorator called on [Function: MyClass]
// MyClass constructor
Method Decorators 🛠️
Method decorators are applied to methods within a class. They receive three parameters: the target class prototype, the method name, and a property descriptor.
function LogMethod(target: Object, key: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling ${key} with arguments: ${args}`);
const result = originalMethod.apply(this, args);
console.log(`${key} returned: ${result}`);
return result;
};
return descriptor;
}
class Calculator {
@LogMethod
add(a: number, b: number): number {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3);
// Output:
// Calling add with arguments: 2,3
// add returned: 5
Property Decorators 🏠
Property decorators are used to modify properties within a class. They receive two parameters: the target class prototype and the property name.
function Validate(target: any, key: string) {
let value = target[key];
const getter = () => value;
const setter = (newValue: any) => {
if (typeof newValue !== 'number' || newValue < 0) {
throw new Error('Invalid value');
}
value = newValue;
};
Object.defineProperty(target, key, {
get: getter,
set: setter,
});
}
class Product {
@Validate
price: number;
constructor(price: number) {
this.price = price;
}
}
const product = new Product(50);
product.price = -10; // Throws an error
// Output:
// Error: Invalid value
Parameter Decorators 🎯
Parameter decorators are applied to parameters of methods within a class. They receive three parameters: the target class prototype, the method name, and the index of the parameter.
const Injectable = (): ParameterDecorator => {
return (target: any, key: string | symbol, index: number) => {
// Register the dependency injection here
console.log(`Injecting parameter at index ${index} in method ${key}`);
};
};
class UserService {
constructor(private readonly logger: Logger) {}
@Injectable()
log(message: string) {
this.logger.log(message);
}
}
const logger = new Logger();
const userService = new UserService(logger);
userService.log('Hello, Decorators!');
// Output:
// Injecting parameter at index 0 in method log
// Hello, Decorators!
Top comments (0)