Introducción a los decoradores

Los decoradores de TypeScript son funciones especiales que permiten añadir metadatos o modificar el comportamiento de clases, métodos y propiedades.

Suelen utilizarse en frameworks como Angular para simplificar el desarrollo.

Cómo funcionan los decoradores

Un decorador es una función que se aplica a una clase o a sus miembros (métodos, propiedades, etc.).

Por ejemplo, @Component en Angular es un decorador que añade metadatos a una clase para definirla como un componente.

Uso de decoradores integrados

TypeScript incluye decoradores integrados como los siguientes:

• @readonly: convierte una propiedad en una propiedad de solo lectura.
• @enumerable: controla si una propiedad se puede enumerar.

Estos decoradores ayudan a modificar directamente el comportamiento de las propiedades o los métodos.

Creación de un decorador sencillo

Puede crear su propio decorador para registrar mensajes o añadir funcionalidades:

Aplíquelo a una propiedad: @Log.

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

Decoradores de clase

Los decoradores de clase se utilizan para modificar o mejorar el comportamiento de una clase completa:

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

Aplíquelo a una clase: @SimpleDecorator.

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

Decoradores de métodos

Los decoradores de métodos modifican el comportamiento de un método de clase:

Úselo en un método: @LogMethod.

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

Uso de decoradores en Angular

Angular se basa en gran medida en los decoradores para añadir metadatos a sus componentes:

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

El decorador @Component define la clase como un componente de Angular.

Prácticas recomendadas para usar decoradores

Al utilizar decoradores:

• Manténgalos sencillos y centrados en una única tarea.
• Utilícelos para los metadatos, no para la lógica compleja.
• Aproveche los decoradores integrados siempre que sea posible para ahorrar tiempo.

¡Felicidades!

Ha aprendido cómo funcionan los decoradores en TypeScript y cómo pueden utilizarse para modificar o mejorar su código. ¡Siga experimentando con los decoradores para dominar su uso en sus proyectos!