Para ser un experto en Angular, tienes que comprender los decorators, una herramienta clave que utilizas casi a diario. Los decorators te permiten modificar o extender el comportamiento de clases, métodos, propiedades y parámetros, todo de manera declarativa. En este artículo, vamos a desglosar qué son, cómo usarlos y cómo crear decorators personalizados para darles un giro único a tus proyectos.
¿Qué son los decorators?
Un decorator en programación es una función que te permite modificar el comportamiento de una clase, un método, una propiedad, o incluso un parámetro. En Angular, estos se utilizan junto con metadata para proporcionar información sobre cómo debe comportarse un componente o servicio.
Por ejemplo, cuando usas el decorator @Component() en Angular, estás añadiendo una serie de propiedades y configuraciones a la clase que define el componente. Angular interpreta estos decorators para renderizar la interfaz de usuario o ejecutar funcionalidades específicas en el backend.
Tipos de decorators en Angular
En TypeScript y, por ende, en Angular, existen varios tipos de decorators. Estos son los más comunes:
- Decorators de Clase: Modifican el comportamiento de la clase misma. Reciben como parámetro el constructor de la clase.
- Decorators de Método: Permiten modificar el comportamiento de un método dentro de una clase. Reciben parámetros como
target,propertyName, ydescriptor. - Decorators de Propiedad: Estos se aplican a las propiedades de una clase. Al igual que los decorators de método, reciben
targetypropertyNamecomo parámetros. - Decorators de Parámetro: Permiten modificar parámetros de un método. Reciben el
target, elpropertyNamey el índice del parámetro.
Además, los decorators pueden ser anidados o compuestos. Esto significa que puedes aplicar varios decorators a la misma clase o método, lo que aumenta su flexibilidad y capacidad de reutilización.
Activando los decorators en TypeScript
Para poder usar decorators en Angular, debes asegurarte de que tu proyecto esté configurado correctamente. En el archivo tsconfig.json, debes activar el flag experimental para decorators. Angular lo configura automáticamente por ti, pero si decides probar decorators personalizados sin Angular, no olvides activar esta opción.
{
"compilerOptions": {
"experimentalDecorators": true
}
}
Creando tu Propio Decorator: Un ejemplo básico
Vamos a crear un decorator de clase personalizado. Este decorator simplemente registrará el nombre de la clase en la consola cada vez que se instancie.
Paso 1: Crear el decorator
Primero, definimos una función que será nuestro decorator de clase. Esta función recibirá el constructor de la clase como parámetro y podrá modificarla según sea necesario.
typescriptCopiarexport function CustomDecorator(constructor: Function) {
console.log(`Clase llamada desde: ${constructor.name}`);
}
Paso 2: Aplicar el decorator
Ahora, aplicamos el decorator a una clase de Angular, por ejemplo, un componente.
typescriptCopiar@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
@CustomDecorator
export class AppComponent {
title = 'decorators-demo';
}
Cuando Angular cree una instancia de AppComponent, se imprimirá en la consola: «Clase llamada desde: AppComponent».
Decorators de Métodos: Agregar funcionalidades a tus métodos
Otro caso interesante es el decorator para métodos. Supongamos que queremos crear un decorator que registre todos los argumentos que recibe un método antes de que se ejecute.
Paso 1: Crear el decorator de método
Este decorator tendrá acceso al descriptor del método y podrá modificar el comportamiento del mismo. Aquí un ejemplo simple que hace un log de los argumentos que recibe el método:
typescriptCopiarexport function LogArguments(target: any, propertyName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Arguments for ${propertyName}:`, args);
return originalMethod.apply(this, args);
};
}
Paso 2: Usar el decorator
Aplicamos el decorator a un método dentro de una clase, por ejemplo, en un componente de Angular:
typescriptCopiar@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'decorators-demo';
@LogArguments
greet(name: string) {
return `Hello, ${name}!`;
}
}
Al invocar el método greet(), se loguearán los argumentos en la consola.
Decorators con Parámetros: Más Flexibilidad
En ocasiones, necesitarás que tus decorators reciban parámetros para personalizarlos aún más. Aquí te mostramos cómo hacerlo.
Paso 1: Crear el decorator con parámetros
Podemos modificar el decorator de clase para que reciba un mensaje personalizado.
typescriptCopiarexport function CustomMessage(message: string) {
return function (constructor: Function) {
console.log(`${message} - Clase llamada desde: ${constructor.name}`);
};
}
Paso 2: Usar el decorator con parámetros
Ahora, al aplicar el decorator, podemos pasar un mensaje que se logueará en la consola:
typescriptCopiar@CustomMessage('Hola desde Angular')
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'decorators-demo';
}
Este decorator imprimirá: «Hola desde Angular – Clase llamada desde: AppComponent».
Resumen
Los decorators en Angular son herramientas poderosas que te permiten extender y modificar el comportamiento de las clases, métodos y propiedades de una manera declarativa. No solo te facilitan la vida al trabajar con Angular, sino que también pueden ayudarte a personalizar su funcionamiento y hacer tu código más limpio y reutilizable. Además, con la capacidad de crear decorators personalizados, puedes llevar tu desarrollo a otro nivel.
Si te ha gustado este artículo y quieres seguir aprendiendo sobre Angular, recuerda que puedes seguir formándote en Angular y los lenguajes de programación más demandados de la actualidad con el Full Stack Bootcamp de KeepCoding.
