Contenido del curso
JORGE ALEXANDER MÚNERA CANABAL
Tomás André Peñaloza Avilés
JEANPIERR DAVID RAMOS SANDOVAL
Jose Enrique Marquez
Carlos Nicolas Gonzalez Cabrera
humberto viveros
Brandon Argel Verdeja Domínguez
Edward Rodríguez
Nicolás Torres L.
Daniel Alexander Muelas Rivera
Oscar Monsalve
Norman Jaimes Mora
muy mal estructurado esta parte final del curso para poder entender estos conceptos, ademas lo que siempre digo, utilizan ejemplos que no son reales ni practics, es mas facil aprender un concepto viendo como se usa realmente.
muy mal, esta mucho mejor estructurado y entendible el curso de Nicolas.
Todos los cursos que "actualizan" los desmejoran, la verdad encuentro mas valor hasta en youtube
es verdad. A mi también me costó mucho entender que son y porque usaría decoradores
Concuerdo, para realmente aprender el manejo de cada uno de los conceptos y herramientas sería más útil por aprendizaje que fuera en un ambiente más acercado a la realidad, para saber cuando utilizarlo.
Lo mismo ocurre con la clase de los "types" Son ejemplos que no ayudan a saber cuando utilizarlos realmente
No creo haber escuchado en clases anteriores sobre los prototype este termino puede llegar a confunder a algunas personas sin ese contexto.
Espero 2 cosas haberme equivocado con mi comentario y si no que el enlace le sirva si no conocen acerca de los proptotype en JavaScript
Sin mencionar la parte de Angular, si llego a mencionar, pero acá veo que salió de la nada
Muy probablemente esta clase (por error) se colocó entre las primeras. También me pareció lo mismo. Pero ahora ya la ubicaron entre las últimas siguiendo el orden correcto.
Decorators are one of the most distinctive features of TypeScript, especially if you work with frameworks such as Angular or NestJS. They are a form of metaprogramming that allows you to add behavior, metadata, or transform classes, methods, properties, and parameters at definition time.
In TypeScript, there are two versions of decorators: Legacy/Experimental (enabled with experimentalDecorators: true in tsconfig.json) and Stage 3/TC39 Standard (recently introduced). Here we will look at the modern standard, which is the future of the language.
How decorators work
A decorator is simply a function that is executed when the class is defined (not when it is instantiated). Depending on where it is applied, the function receives different arguments.
1. Class Decorators
These are used to observe, modify, or replace a class definition.
function Logger(value: Function, context: ClassDecoratorContext) { console.log(`Class ${context.name} was defined!`); } @Logger class UserService { constructor() { console.log("UserService instance created."); } }
2. Method decorators
They allow you to intercept method calls, which is useful for logging, validation, or measuring execution times.
function LogMethod(target: any, context: ClassMethodDecoratorContext) { const methodName = String(context.name); return function (this: any, ...args: any[]) { console.log(`Calling ${methodName} with args:`, args); const result = target.apply(this, args); return result; }; } class Calculator { @LogMethod add(a: number, b: number) { return a + b; } } const calc = new Calculator(); calc.add(5, 10); // Log: Calling add with args: [5, 10]
Real world examples
function Required(value: undefined, context: ClassFieldDecoratorContext) { return function (initialValue: any) { if (initialValue === undefined || initialValue === null) { throw new Error(`${String(context.name)} is required!`); } return initialValue; }; } class Product { @Required title: string; constructor(title: string) { this.title = title; } } // const p = new Product(null as any); // Throws Error: title is required!
Decorator factories (passing arguments)
Sometimes you need to pass data to the decorator (such as @Component({ selector: 'app-root' }) in Angular). For this, we use a Factory: a function that returns a decorator.
function Role(requiredRole: string) { return function (value: Function, context: ClassMethodDecoratorContext) { return function (this: any, ...args: any[]) { // Mock auth check const userRole = "guest"; if (userRole !== requiredRole) { throw new Error("Access Denied!"); } return value.apply(this, args); }; }; } class AdminPanel { @Role("admin") deleteUser() { console.log("User deleted."); } }
Si alguien está utilizando Bun como lo estoy haciendo yo, puede que se le presente un problema al definir el decorador como lo explica el profe. Para corregir el error, el código es el siguiente:
function PersonaDec<T extends { new (...args: any[]): {} }>(constructor: T) { console.log(constructor); return class extends constructor { despedir(despedida: string): string { return `${despedida}, ${(this as any).nombre}`; } }; } @PersonaDec class Persona { nombre: string; edad: number; constructor(nombre: string, edad: number) { this.nombre = nombre; this.edad = edad; } saludar(saludo: string): string { return `${saludo}, mi nombre es ${this.nombre} y tengo ${this.edad} años`; } despedir(despedida: string): string { return `${despedida}, ${this.nombre}`; } } ```function PersonaDec\<T extends { new (...args: any\[]): {} }>(constructor: T) { console.log(constructor); return class extends constructor { despedir(despedida: string): string { return `${despedida}, ${(*this* as any).nombre}`; } };} @PersonaDecclass Persona { nombre: string; edad: number;   constructor(nombre: string, edad: number) { *this*.nombre = nombre; *this*.edad = edad; }   saludar(saludo: string): string { return `${saludo}, mi nombre es ${*this*.nombre} y tengo ${*this*.edad} años`; } despedir(despedida: string): string { return `${despedida}, ${*this*.nombre}`; }}
Un decorador en JavaScript no es una característica nativa como en TypeScript, pero puedes simular su comportamiento utilizando funciones. Aquí hay un ejemplo simple:
function logger(target) { const originalMethod = target.prototype.sayHello; target.prototype.sayHello = function() { console.log('Antes de llamar a sayHello'); originalMethod.apply(this); console.log('Después de llamar a sayHello'); }; } @logger class Person { sayHello() { console.log('Hola, soy una persona'); } } const person = new Person(); person.sayHello();
En este caso, logger actúa como un decorador que envuelve el método sayHello de la clase Person. Aunque esta sintaxis de decoradores no es parte del estándar de JavaScript, puedes utilizar funciones de orden superior para lograr un efecto similar.
Un decorador en TypeScript es una función que permite agregar metadatos o modificar el comportamiento de clases, métodos, propiedades o parámetros. Se utiliza con la sintaxis del símbolo @ seguido del nombre del decorador. Los decoradores facilitan la extensión de la funcionalidad de los elementos y son ampliamente utilizados en frameworks como Angular. Por ejemplo, puedes usar un decorador para agregar un método a una clase o para definir un comportamiento especial en un componente.
Para usar decoradores, asegúrate de que la opción experimentalDecorators esté habilitada en tu tsconfig.json.
De este tema, me confundió mucho que era el target:Function como parámetro de la función del decorador pero con esto me quedó claro:
La cantidad y tipo de parámetros que recibe una función decoradora depende de lo que estás decorando (clase, método, propiedad, etc.).
Según eso, estos son los tipos de decoradores y los parámetros que reciben:
Por ejemplo, esto es lo que significa un decorador de método:
function DecoradorMetodo( target: any, // El prototipo de la clase propertyKey: string, // El nombre del método (por ejemplo, 'despedir') descriptor: PropertyDescriptor // Info sobre ese método ) { ... }
¿Y qué es PropertyDescriptor?
Es un objeto que describe cómo se comporta una propiedad (ya sea clase, método, etc.), y tiene estas claves opcionales:
interface PropertyDescriptor { value?: any; // el valor real (por ejemplo, el método despedir) writable?: boolean; // si se puede sobrescribir enumerable?: boolean; // si se puede recorrer configurable?: boolean; // si se puede reconfigurar o borrar }
Hace meses ya me había visto los cursos que dio el profe Juan sobre POO en JS (el básico y el intermedio), y creo que eso me ayudó a entender más rápido este tema de los decoradores.
Entonces un decorador sería como un proxy o un middleware? Me llegué a confundir ahí.
