Introduction to Decorators

Decorators in TypeScript are special functions that allow you to add metadata or modify the behavior of classes, methods, and properties.

They are often used in frameworks like Angular to simplify development.

How Decorators Work

A decorator is a function that is applied to a class or its members (methods, properties, etc.).

For example, @Component in Angular is a decorator that adds metadata to a class to define it as a component.

Using Built-in Decorators

TypeScript has built-in decorators such as:

• @readonly: Makes a property read-only.
• @enumerable: Controls whether a property is enumerable.

These decorators help modify the behavior of properties or methods directly.

Creating a Simple Decorator

You can create your own decorator to log messages or add functionality:

Apply it to a property: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

Class Decorators

Class decorators are used to modify or enhance the behavior of an entire class:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Apply it to a class: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Method Decorators

Method decorators modify the behavior of a class method:

Use it on a method: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Using Decorators in Angular

Angular heavily relies on decorators to add metadata to its components:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

The @Component decorator defines the class as an Angular component.

Best Practices for Using Decorators

When using decorators:

• Keep them simple and focused.
• Use them for metadata and not for complex logic.
• Leverage built-in decorators when possible to save time.

Congratulations!

You’ve learned how decorators work in TypeScript and how they can be used to modify or enhance your code. Keep experimenting with decorators to master their use in your projects!