El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els decoradors són una característica avançada de TypeScript que permeten modificar el comportament de classes, mètodes, propietats o paràmetres. Són una forma poderosa de metaprogramació que pot ajudar a simplificar i organitzar el codi, especialment en aplicacions grans.

Què són els Decoradors?

Definició: Els decoradors són funcions que poden ser aplicades a classes, mètodes, accessors, propietats o paràmetres per modificar el seu comportament.
Ús Comú: S'utilitzen sovint en frameworks com Angular per a la injecció de dependències, validació, i altres tasques repetitives.

Tipus de Decoradors

Decoradors de Classe: S'apliquen a la definició d'una classe.
Decoradors de Mètode: S'apliquen a un mètode d'una classe.
Decoradors de Propietat: S'apliquen a una propietat d'una classe.
Decoradors de Paràmetre: S'apliquen a un paràmetre d'un mètode.

Exemple de Decorador de Classe

Un decorador de classe pot modificar o substituir la classe a la qual s'aplica.

function logClass(target: Function) {
    console.log(`Classe creada: ${target.name}`);
}

@logClass
class MyClass {
    constructor() {
        console.log('Instància de MyClass creada');
    }
}

const instance = new MyClass();

Explicació

logClass: És un decorador de classe que rep la funció constructora de la classe com a argument.
@logClass: Aplica el decorador a MyClass, imprimint un missatge quan la classe es defineix.

Exemple de Decorador de Mètode

Els decoradors de mètode poden modificar el comportament dels mètodes d'una classe.

function logMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Mètode ${propertyKey} cridat amb arguments: ${args}`);
        return originalMethod.apply(this, args);
    };
}

class Calculator {
    @logMethod
    add(a: number, b: number): number {
        return a + b;
    }
}

const calculator = new Calculator();
calculator.add(2, 3);

Explicació

logMethod: Modifica el mètode add per registrar els arguments amb els quals es crida.
descriptor.value: Es guarda el mètode original i es redefineix per afegir funcionalitat addicional.

Exercici Pràctic

Objectiu: Crea un decorador de propietat que faci que una propietat sigui de només lectura.

Pasos

Defineix un decorador de propietat que impedeixi la modificació de la propietat.
Aplica el decorador a una classe i comprova el seu comportament.

Solució

function readonly(target: Object, propertyKey: string) {
    Object.defineProperty(target, propertyKey, {
        writable: false
    });
}

class Person {
    @readonly
    name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Això hauria de fallar en temps d'execució
console.log(person.name); // Ha de mostrar 'John Doe'

Explicació

readonly: Defineix la propietat com a no modificable.
Object.defineProperty: Utilitzat per establir la propietat writable a false.

Conclusió

Els decoradors de TypeScript són una eina poderosa per a la metaprogramació, permetent modificar i estendre el comportament de les classes i els seus membres de manera elegant i reutilitzable. Amb la pràctica, els decoradors poden simplificar significativament el codi i millorar la seva organització.

En el següent tema, explorarem les millors pràctiques per utilitzar TypeScript i Playwright conjuntament, assegurant que el vostre codi sigui eficient i mantenible.

Decoradors de TypeScript

Què són els Decoradors?

Tipus de Decoradors

Exemple de Decorador de Classe

Explicació

Exemple de Decorador de Mètode

Explicació

Exercici Pràctic

Pasos

Solució

Explicació

Conclusió

Dramaturg amb TypeScript: De Principiant a Avançat

Mòdul 1: Introducció a Playwright i TypeScript

Mòdul 2: Començant amb Playwright

Mòdul 3: Fonaments de Playwright i TypeScript

Mòdul 4: Funcions Avançades de Playwright

Mòdul 5: Estratègies d'Automatització de Proves

Mòdul 6: Tècniques Avançades de TypeScript

Mòdul 7: Aplicacions Reals de Playwright

Mòdul 8: Conclusió del Curs i Propers Passos