PricingLoginStart free
Frontend Academy · Lección

Decoradores y metadatos

Habilite los decoradores experimentales, escriba decoradores de clases, métodos y propiedades, y use reflect-metadata para patrones de inyección de dependencias.

Lección 2 de 414 pasos

Decoradores y metadatos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué son los decoradores?

Los decoradores son funciones que modifican clases, métodos, propiedades o parámetros en el momento de su definición. Se utilizan ampliamente en Angular, NestJS, TypeORM y MobX basado en clases.

Sintaxis de los decoradores

Anteceda una clase, un método, una propiedad o un parámetro con @DecoratorName. La función decoradora se ejecuta cuando se define la clase.

@Component({ selector: 'app-root' })
export class AppComponent {
  @Input() title: string;

  @HostListener('click')
  onClick() {
    console.log('clicked');
  }
}

Activar los decoradores

Active la bandera experimental en tsconfig.json. Los nuevos decoradores de ECMAScript Stage 3 (TypeScript 5.0+) no necesitan esta bandera, pero tienen una semántica diferente.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Decorador de clase

Recibe el constructor como argumento. Puede reemplazar, envolver o ampliar la clase.

function Singleton<T extends { new (...a: any[]): {} }>(target: T) {
  let instance: T;
  return class extends target {
    constructor(...args: any[]) {
      if (!instance) instance = new target(...args) as T;
      return instance;
    }
  };
}

@Singleton
class Logger { /* ... */ }

Decorador de método

Recibe (target, key, descriptor). Puede envolver el método, por ejemplo, para registrar las llamadas.

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`[${key}]`, args);
    return original.apply(this, args);
  };
}

class Service {
  @Log
  greet(name: string) { return `Hello ${name}`; }
}

Decorador de propiedad

Recibe (target, key). A menudo se utiliza con reflect-metadata para registrar información sobre la propiedad.

function Required(target: any, key: string) {
  const existing = Reflect.getMetadata('required', target) || [];
  Reflect.defineMetadata('required', [...existing, key], target);
}

class User {
  @Required name: string;
  @Required email: string;
}

Decorador de parámetro

Recibe (target, key, parameterIndex). Se utiliza para la inyección de dependencias: registra qué parámetros necesitan qué servicios.

function Inject(token: string) {
  return function (target: any, key: string, index: number) {
    const existing = Reflect.getMetadata('inject', target, key) || {};
    existing[index] = token;
    Reflect.defineMetadata('inject', existing, target, key);
  };
}

class UserService {
  constructor(@Inject('Database') db: Database) {}
}

reflect-metadata

reflect-metadata es un polyfill que permite a los decoradores leer y escribir metadatos en las clases. Es necesario para la inyección de dependencias de Angular y muchos ORM.

npm install reflect-metadata

// main.ts (entry point):
import 'reflect-metadata';

import { Reflect } from 'reflect-metadata';
Reflect.defineMetadata('key', 'value', target);
Reflect.getMetadata('key', target); // 'value'

Fábricas de decoradores

Una fábrica devuelve un decorador y se utiliza para pasar argumentos.

function Component(config: { selector: string }) {
  return function (target: any) {
    target.selector = config.selector;
  };
}

@Component({ selector: 'app-root' })
class AppComponent {}

Caso de uso: validación

Combine decoradores de propiedades con una función validate() para crear una pequeña biblioteca de validación.

// Decorator records that a field is required:
function Required(target: any, key: string) {
  const fields = Reflect.getMetadata('required', target) || [];
  Reflect.defineMetadata('required', [...fields, key], target);
}

class User {
  @Required name!: string;
  @Required email!: string;
}

function validate(obj: any): string[] {
  const required: string[] = Reflect.getMetadata('required', obj) || [];
  return required.filter(k => obj[k] == null);
}

Decoradores Stage 3 (TC39)

Los decoradores estandarizados (TS 5.0+, compatibles con Node 22+ mediante una bandera) tienen una firma diferente. No necesitan la bandera experimental ni reflect-metadata.

Cuándo utilizar decoradores

Utilice decoradores cuando el framework los proporcione (Angular, NestJS, TypeORM). No cree los suyos propios en código frontend convencional: añaden complejidad y le vinculan a un comportamiento de ejecución específico.

Comprobación rápida

¿Qué flags de tsconfig debe activar para utilizar decoradores heredados (experimentales) con reflexión de metadatos?

Responde en la lección interactiva

Resumen: decoradores

Los decoradores modifican clases, métodos, propiedades y parámetros en el momento de su definición. Active experimentalDecorators + emitDecoratorMetadata. Las firmas de los decoradores de clase, método, propiedad y parámetro son diferentes. reflect-metadata almacena metadatos; las fábricas permiten pasar argumentos. Se utilizan ampliamente en Angular, NestJS y TypeORM. Los decoradores Stage 3 (TS 5+) son el futuro y no necesitan flags.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
41
Lecciones
163
Empezar a aprender gratisVer el curso completo

Preguntas frecuentes

¿La lección «Decoradores y metadatos» es gratis?

Sí — el texto completo de «Decoradores y metadatos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Decoradores y metadatos»?

Habilite los decoradores experimentales, escriba decoradores de clases, métodos y propiedades, y use reflect-metadata para patrones de inyección de dependencias. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Decoradores y metadatos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Tipos de literales de plantilla
  2. Decoradores y metadatos
  3. TypeScript con React: genéricos, FC y hooks
  4. Modo estricto y eliminación de any
← Volver a Frontend Academy