Khóa học Frontend NextJS + React

@someDecorator
class MyClass {
  @anotherDecorator
  myMethod() {
    // ...
  }
}

// Đây là Decorator Factory
function logMessage(message: string) {
  // Đây là Decorator thực tế
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(`LOG: ${message} - Decorating method: ${String(propertyKey)}`);
    // Bạn có thể làm gì đó với descriptor ở đây
  };
}

class Service {
  @logMessage("Starting operation") // Sử dụng Decorator Factory với tham số
  doOperation() {
    console.log("Operation is running...");
  }
}

const service = new Service();
service.doOperation();
// Output: LOG: Starting operation - Decorating method: doOperation
//         Operation is running...

// Decorator: In thông tin về class
function reportClass(constructor: Function) {
  console.log(`Decorating class: ${constructor.name}`);
  // Bạn có thể thêm các thuộc tính tĩnh, phương thức tĩnh vào constructor ở đây
  // constructor.prototype.extraMethod = () => console.log("Extra!");
}

// Decorator Factory: Thêm một thuộc tính tĩnh vào class
function addTimestamp(key: string) {
  return function<T extends {new(...args: any[]): {}}>(constructor: T) {
    // Trả về một class mới kế thừa từ class gốc
    return class extends constructor {
      // Thêm thuộc tính tĩnh
      static [key] = new Date().toISOString();
    }
  }
}


@reportClass // Áp dụng Decorator
@addTimestamp("creationDate") // Áp dụng Decorator Factory
class UserProfile {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

console.log((UserProfile as any).creationDate); // Truy cập thuộc tính tĩnh được thêm vào

// Giải thích:
// @reportClass chỉ đơn giản là log tên class khi nó được định nghĩa.
// @addTimestamp là một factory trả về một decorator. Decorator này nhận constructor của UserProfile,
// sau đó trả về một *class mới* kế thừa từ UserProfile và thêm thuộc tính tĩnh `creationDate`.
// Về cơ bản, @addTimestamp đã *thay thế* class UserProfile gốc bằng class mới này.

// Decorator: Làm cho phương thức chỉ đọc (không thể gán lại)
function readOnly(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  descriptor.writable = false; // Ngăn chặn việc gán lại hàm khác vào tên phương thức này
  return descriptor; // Trả về descriptor đã chỉnh sửa
}

// Decorator: Đo thời gian thực thi của phương thức
function timing(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value; // Lưu lại hàm gốc

  descriptor.value = function(...args: any[]) {
    const start = performance.now();
    const result = originalMethod.apply(this, args); // Gọi hàm gốc với đúng context (this) và đối số
    const end = performance.now();
    console.log(`Method "${String(propertyKey)}" executed in ${end - start}ms`);
    return result; // Trả về kết quả của hàm gốc
  };

  return descriptor; // Trả về descriptor mới
}

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

  @timing
  multiply(a: number, b: number): number {
    // Giả lập công việc tốn thời gian
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += a * b;
    }
    return a * b;
  }
}

const calc = new Calculator();
console.log(calc.add(2, 3)); // Output: 5

// Thử gán lại add (sẽ báo lỗi nếu ở strict mode hoặc không có decorator)
// calc.add = () => 10; // Lỗi hoặc không có tác dụng do @readOnly

calc.multiply(4, 5); // Output: Method "multiply" executed in XXXms, rồi 20

// Decorator: In giá trị mới khi setter được gọi
function logSet(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalSetter = descriptor.set; // Lưu setter gốc

  descriptor.set = function(value: any) {
    console.log(`Setting ${String(propertyKey)} to: ${value}`);
    if (originalSetter) { // Đảm bảo gọi setter gốc nếu có
      originalSetter.call(this, value);
    }
  };

  return descriptor;
}

class Point {
  private _x: number = 0;
  private _y: number = 0;

  get x(): number { return this._x; }

  @logSet // Áp dụng cho setter
  set x(value: number) { this._x = value; }

  get y(): number { return this._y; }

  set y(value: number) { this._y = value; }
}

const p = new Point();
p.x = 10; // Output: Setting x to: 10
p.y = 20; // Không có output log vì setter y không được trang trí

// Decorator Factory: Thêm metadata về kiểu dữ liệu
function Type(type: Function) {
  return function(target: any, propertyKey: string | symbol) {
    // Lưu metadata về kiểu dữ liệu của property
    // Cần thư viện reflect-metadata để làm việc này hiệu quả
    // import "reflect-metadata";
    Reflect.defineMetadata("design:type", type, target, propertyKey);
    console.log(`Metadata added for property "${String(propertyKey)}": Type is ${type.name}`);
  };
}

// Decorator Factory: Đánh dấu thuộc tính là bắt buộc
function Required(target: any, propertyKey: string | symbol) {
   console.log(`Metadata added for property "${String(propertyKey)}": Required`);
   // Lưu metadata "required"
   if (!target.__requiredProperties) {
       target.__requiredProperties = [];
   }
   target.__requiredProperties.push(propertyKey);
}


class Product {
  @Required // Đánh dấu thuộc tính 'id' là bắt buộc
  @Type(Number) // Thêm metadata kiểu dữ liệu
  id: number;

  @Required
  @Type(String)
  name: string;

  @Type(Number) // Không bắt buộc
  price: number;

  constructor(id: number, name: string, price: number) {
      this.id = id;
      this.name = name;
      this.price = price;
  }
}

// Giả lập việc đọc metadata (framework sẽ làm điều này)
function validate(instance: any) {
    const requiredProps = instance.constructor.prototype.__requiredProperties || [];
    console.log(`Validating instance of ${instance.constructor.name}. Required properties:`, requiredProps);
    for (const propName of requiredProps) {
        if (instance[propName] === undefined || instance[propName] === null) {
            console.error(`Error: Property "${String(propName)}" is required.`);
        }
    }

    // Đọc metadata kiểu dữ liệu (cần reflect-metadata)
    // const type = Reflect.getMetadata("design:type", instance, "id");
    // console.log(`Design type of 'id' is`, type); // Output: Design type of 'id' is function Number() { [native code] }
}

const validProduct = new Product(1, "Laptop", 1200);
validate(validProduct); // Validating instance..., không có lỗi

const invalidProduct = new Product(null as any, "Mouse", 25);
validate(invalidProduct); // Validating instance..., Error: Property "id" is required., Error: Property "name" is required.

// Decorator: Đánh dấu tham số này là một service cần được inject
function Inject(token: any) {
  return function(target: any, propertyKey: string | symbol, parameterIndex: number) {
    console.log(`Marking parameter ${parameterIndex} of method "${String(propertyKey)}" as injectable with token`, token);
    // Lưu metadata: Tham số thứ parameterIndex của phương thức propertyKey cần dependency với token này
    if (!target.__injectableParams) {
        target.__injectableParams = {};
    }
    if (!target.__injectableParams[propertyKey]) {
        target.__injectableParams[propertyKey] = [];
    }
    target.__injectableParams[propertyKey][parameterIndex] = token;
  };
}

// Giả lập một vài service
class LoggerService { log(msg: string) { console.log(`[Logger]: ${msg}`); } }
class DatabaseService { save(data: any) { console.log(`[DB]: Saving`, data); } }

// Giả lập một DI container đơn giản
const services = {
    LoggerService: new LoggerService(),
    DatabaseService: new DatabaseService()
};

class UserService {
  // Constructor được trang trí với parameter decorators (ví dụ trong framework như Angular)
  // @Inject(LoggerService) private logger: LoggerService
  // constructor(logger: LoggerService) { this.logger = logger; }

  // Hoặc trong phương thức (ví dụ trong framework khác)
  saveUser(userData: any, @Inject(DatabaseService) dbService: DatabaseService, @Inject(LoggerService) loggerService: LoggerService) {
      loggerService.log("Attempting to save user...");
      dbService.save(userData);
      loggerService.log("User saved.");
  }
}

// Framework/Container sẽ đọc metadata và truyền đúng instance vào
// Giả lập gọi phương thức với DI
const userService = new UserService();
const userToSave = { name: "Alice", id: 123 };

// Trong thực tế, framework sẽ tự động tìm các service và truyền vào
// userService.saveUser(userToSave, services.DatabaseService, services.LoggerService);

// Để chạy ví dụ này đơn giản hơn, ta gọi thủ công
userService.saveUser(userToSave, services.DatabaseService, services.LoggerService);

// Giải thích:
// Decorators @Inject đánh dấu tham số `dbService` và `loggerService` cần dependency.
// Khi một framework nhìn thấy metadata này (ví dụ trên UserService.prototype.__injectableParams['saveUser']),
// nó sẽ biết cần phải tìm instance của DatabaseService và LoggerService
// rồi truyền chúng vào khi gọi phương thức saveUser.

function A() { console.log("A"); return (target: any, key: string, desc?: PropertyDescriptor) => { console.log("A applied"); }; }
function B() { console.log("B"); return (target: any, key: string, desc?: PropertyDescriptor) => { console.log("B applied"); }; }

class MyClass {
  @A()
  @B() // B được định nghĩa sau A trong code, nhưng factory của B chạy trước factory của A, và decorator B chạy trước decorator A.
  myMethod() {}
}

// Output khi định nghĩa class:
// B        <-- Factory của B chạy trước (từ dưới lên/phải sang trái)
// A        <-- Factory của A chạy sau
// B applied <-- Decorator B chạy trước (vì factory của nó chạy trước)
// A applied <-- Decorator A chạy sau

npm install reflect-metadata --save

import "reflect-metadata";
// Rest of your application code