Decorators in TypeScript
Decorators are a feature in TypeScript that allows you to add metadata to classes, methods, properties, or parameters at design time. They provide a way to modify or extend the behavior of functions, classes, or properties without modifying their actual implementation. Decorators are heavily used in frameworks like Angular for defining components, services, and routing configurations.
Syntax:
@decorator class MyClass { @decorator myMethod() {} }
Types of Decorators:
Class Decorators: Applied to classes and constructors.
Method Decorators: Applied to methods within a class.
Property Decorators: Applied to properties of a class.
Parameter Decorators: Applied to parameters of a function or method within a class.
Creating Decorators:
A decorator is simply a function that receives target and property information and returns the modified target.
// Class decorator example function myClassDecorator(target: Function) { // Modify or extend the behavior of the class } // Method decorator example function myMethodDecorator(target: any, key: string, descriptor: PropertyDescriptor) { // Modify or extend the behavior of the method } // Property decorator example function myPropertyDecorator(target: any, key: string) { // Modify or extend the behavior of the property } // Parameter decorator example function myParameterDecorator(target: any, key: string, index: number) { // Modify or extend the behavior of the parameter }
Using Decorators:
You can apply decorators using the @ syntax.
@myClassDecorator class MyClass { @myPropertyDecorator myProperty: string; @myMethodDecorator myMethod() {} myMethodWithParam(@myParameterDecorator param: string) {} }
Note: Decorators are an experimental feature in JavaScript and TypeScript. They are currently a Stage 2 proposal in the ECMAScript standardization process. To enable support for decorators in TypeScript, you need to set "experimentalDecorators": true in your tsconfig.json file.
Benefits of Decorators:
Separation of Concerns: Decorators allow you to separate cross-cutting concerns such as logging, validation, or authentication from the core business logic of your application.
Code Reusability: Decorators promote code reuse by allowing you to apply common functionality to multiple classes, methods, or properties.
Readability and Maintainability: Decorators make your code more readable and maintainable by clearly indicating the intent and purpose of each decorated element.
Extensibility: Decorators provide a flexible way to extend the behavior of classes or methods without modifying their original implementation.
1. Class Decorators:
Class decorators are applied to classes and constructors. They receive the constructor function of the class as their only parameter. Class decorators are commonly used for configuring or modifying classes before they are instantiated.
Example:
function myClassDecorator<T extends { new (...args: any[]): {} }>(constructor: T) { return class extends constructor { newProperty = "new property"; hello = "override"; }; } @myClassDecorator class MyClass { hello: string; constructor(m: string) { this.hello = m; } } console.log(new MyClass("world").hello); // Output: override console.log(new MyClass("world").newProperty); // Output: new property
2. Method Decorators:
Method decorators are applied to methods within a class. They receive the target object, the method name, and a property descriptor as parameters. Method decorators can be used for modifying or extending the behavior of methods.
Example:
function myMethodDecorator(target: any, key: string, descriptor: PropertyDescriptor) { console.log("Method decorator called on:", target, key, descriptor); } class MyClass { @myMethodDecorator myMethod() {} }
3. Property Decorators:
Property decorators are applied to properties of a class. They receive the target object and the property name as parameters. Property decorators can be used for modifying or extending the behavior of properties.
Example:
function myPropertyDecorator(target: any, key: string) { console.log("Property decorator called on:", target, key); } class MyClass { @myPropertyDecorator myProperty: string; }
4. Parameter Decorators:
Parameter decorators are applied to parameters of a function or method within a class. They receive the target object, the method name, and the parameter index as parameters. Parameter decorators can be used for modifying or extending the behavior of parameters.
Example:
function myParameterDecorator(target: any, key: string, index: number) { console.log("Parameter decorator called on:", target, key, index); } class MyClass { myMethod(@myParameterDecorator param: string) {} }
Behavior of Decorators:
- Decorators are applied from bottom to top, meaning that the innermost decorator is applied first, followed by outer decorators.
- Class decorators are applied when the class is declared, method decorators when the method is defined, property decorators when the property is declared, and parameter decorators when the method is called.
- Decorators can be used for a wide range of purposes, such as logging, validation, authorization, caching, and dependency injection.
Conclusion:
Decorators are a powerful feature of TypeScript that allows you to add metadata and modify the behavior of classes, methods, properties, and parameters at design time. By understanding the different types of decorators and their behavior, you can leverage decorators to enhance the structure, functionality, and maintainability of your TypeScript codebase.
0 Comments