El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Los decoradores en TypeScript son una característica avanzada que permite modificar el comportamiento de clases, métodos, propiedades y parámetros. Son una forma poderosa de añadir metadatos y lógica adicional a tu código de manera declarativa. En este tema, exploraremos qué son los decoradores, cómo se utilizan y proporcionaremos ejemplos prácticos para ilustrar su uso.

¿Qué son los Decoradores?

Definición: Los decoradores son funciones que se aplican a declaraciones de clases, métodos, propiedades o parámetros. Se utilizan para modificar o extender su comportamiento.
Sintaxis: Se representan con el símbolo @ seguido del nombre del decorador. Por ejemplo, @decorador.

Tipos de Decoradores

Decoradores de Clase: Se aplican a la definición de una clase.
Decoradores de Método: Se aplican a métodos dentro de una clase.
Decoradores de Propiedad: Se aplican a propiedades dentro de una clase.
Decoradores de Parámetro: Se aplican a parámetros de métodos dentro de una clase.

Ejemplo Práctico: Decorador de Clase

Vamos a crear un decorador de clase que registre la creación de instancias de una clase.

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

@logClass
class MiClase {
    constructor() {
        console.log('Instancia de MiClase creada');
    }
}

const instancia = new MiClase();

Explicación del Código

logClass: Es un decorador de clase que toma como argumento la función constructora de la clase.
@logClass: Aplica el decorador a MiClase, registrando un mensaje en la consola cada vez que se crea una instancia de la clase.

Ejemplo Práctico: Decorador de Método

Ahora, crearemos un decorador de método que registre la ejecución de un método.

function logMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Método ${propertyKey} ejecutado con argumentos: ${JSON.stringify(args)}`);
        return originalMethod.apply(this, args);
    };
}

class Calculadora {
    @logMethod
    sumar(a: number, b: number): number {
        return a + b;
    }
}

const calc = new Calculadora();
calc.sumar(2, 3);

Explicación del Código

logMethod: Es un decorador de método que intercepta la ejecución del método original.
descriptor.value: Se modifica para envolver el método original, añadiendo un registro antes de su ejecución.

Ejercicio Práctico

Objetivo: Crear un decorador de propiedad que valide que una propiedad numérica no sea negativa.

Instrucciones

Define un decorador de propiedad llamado nonNegative.
Aplica el decorador a una propiedad de una clase.
Implementa la lógica para lanzar un error si se intenta asignar un valor negativo.

Solución

function nonNegative(target: Object, propertyKey: string) {
    let value: number;

    const getter = function () {
        return value;
    };

    const setter = function (newVal: number) {
        if (newVal < 0) {
            throw new Error('El valor no puede ser negativo');
        }
        value = newVal;
    };

    Object.defineProperty(target, propertyKey, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}

class Cuenta {
    @nonNegative
    saldo: number = 0;
}

const cuenta = new Cuenta();
cuenta.saldo = 100; // Correcto
// cuenta.saldo = -50; // Lanza un error

Explicación del Código

nonNegative: Define un decorador de propiedad que utiliza Object.defineProperty para interceptar el acceso a la propiedad.
setter: Lanza un error si el valor asignado es negativo.

Conclusión

Los decoradores en TypeScript son una herramienta poderosa para añadir metadatos y lógica adicional a tu código de manera declarativa. En este tema, hemos explorado cómo crear y utilizar decoradores de clase, método y propiedad. Practicar con decoradores te ayudará a comprender mejor su potencial y cómo pueden mejorar la estructura y funcionalidad de tu código.

En el siguiente tema, exploraremos las mejores prácticas para utilizar TypeScript y Playwright de manera efectiva.

Decoradores de TypeScript

¿Qué son los Decoradores?

Tipos de Decoradores

Ejemplo Práctico: Decorador de Clase

Explicación del Código

Ejemplo Práctico: Decorador de Método

Explicación del Código

Ejercicio Práctico

Instrucciones

Solución

Explicación del Código

Conclusión

Playwright con TypeScript: De Principiante a Avanzado

Módulo 1: Introducción a Playwright y TypeScript

Módulo 2: Comenzando con Playwright

Módulo 3: Fundamentos de Playwright y TypeScript

Módulo 4: Funciones Avanzadas de Playwright

Módulo 5: Estrategias de Automatización de Pruebas

Módulo 6: Técnicas Avanzadas de TypeScript

Módulo 7: Aplicaciones Reales de Playwright

Módulo 8: Conclusión del Curso y Próximos Pasos