**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** Advanced TypeScript Features **Topic:** Creating and using decorators **Overview** In this topic, we will delve into the world of decorators in TypeScript. Decorators are a powerful feature in TypeScript that allows us to wrap another function in order to extend the behavior of the wrapped function, without permanently modifying it. Decorators are commonly used in frameworks such as Angular and Nest.js to implement dependency injection, logging, authentication, and other aspects of application behavior. **What are Decorators?** Decorators are essentially functions that return another function, which "wraps" the original function. They can be used to add additional behavior to existing functions or classes without modifying their source code. Here's a simple decorator example: ```typescript function myDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) { console.log('Decorator called!'); return originalMethod.apply(this, args); }; return descriptor; } class MyClass { @myDecorator sayHello(name: string) { console.log(`Hello, ${name}!`); } } const obj = new MyClass(); obj.sayHello('John'); // Output: Decorator called! Hello, John! ``` In this example, the `myDecorator` function is a decorator that logs a message to the console whenever the `sayHello` method is called. **Types of Decorators** There are three types of decorators in TypeScript: * **Method Decorators**: These are used to decorate methods in classes. The decorator function receives three parameters: the target, property key, and property descriptor. * **Class Decorators**: These are used to decorate classes. The decorator function receives one parameter: the target class. * **Property Decorators**: These are used to decorate properties in classes. The decorator function receives two parameters: the target and property key. * **Accessor Decorators**: These are used to decorate accessors (getters and setters) in classes. The decorator function receives three parameters: the target, property key, and property descriptor. **Using Decorators** To use a decorator, you simply add the `@decoratorName` syntax before the function or class you want to decorate. Here are a few examples: ```typescript // Method Decorator function myMethodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) { // Decorator implementation } class MyClass { @myMethodDecorator myMethod() { console.log('Hello!'); } } // Class Decorator function myClassDecorator(constructor: Function) { // Decorator implementation } @myClassDecorator class MyClass { constructor() { console.log('Hello!'); } } // Property Decorator function myPropertyDecorator(target: any, propertyKey: string) { // Decorator implementation } class MyClass { @myPropertyDecorator public myProperty: string; } // Accessor Decorator function myAccessorDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) { // Decorator implementation } class MyClass { private _myProperty: string; @myAccessorDecorator get myProperty(): string { return this._myProperty; } @myAccessorDecorator set myProperty(value: string) { this._myProperty = value; } } ``` **Key Concepts and Takeaways** * Decorators are functions that return functions that wrap other functions. * Decorators can be used to add additional behavior to existing functions or classes without modifying their source code. * There are three types of decorators: method decorators, class decorators, and property decorators. * Decorators can be used to implement dependency injection, logging, authentication, and other aspects of application behavior. * Decorators can be combined to create more complex behavior. **Example Use Cases** * **Logging**: Decorators can be used to log information about function calls, such as the input parameters and return value. * **Authentication**: Decorators can be used to check if a user is authenticated before allowing them to call a function. * **Rate Limiting**: Decorators can be used to limit the number of times a function can be called within a certain time period. * **Caching**: Decorators can be used to cache the results of function calls, so that the next time the function is called with the same input parameters, the cached result can be returned instead of recalculating the result. **Additional Resources** * **Official TypeScript Documentation**: [https://www.typescriptlang.org/docs/handbook/decorators.html](https://www.typescriptlang.org/docs/handbook/decorators.html) * **Wkipedia Article on Decorator Pattern**: [https://en.wikipedia.org/wiki/Decorator_pattern](https://en.wikipedia.org/wiki/Decorator_pattern) **Exercise** Try creating a decorator that logs the execution time of a function. You can use the `console.time` and `console.timeEnd` functions to measure the execution time. **Leave a comment below if you have any questions or need further clarification on any of the concepts.**