Cách tạo trình trang trí TypeScript tùy chỉnh

Decorator là một tính năng trong TypeScript cho phép sửa đổi các lớp, phương thức, thuộc tính hoặc tham số khi chạy. Chúng là các hàm đặc biệt cung cấp khả năng lập trình siêu dữ liệu. Trong TypeScript, decorator thường được sử dụng trong các khuôn khổ như Angular để tăng cường chức năng. Bài viết này giải thích cách tạo decorator tùy chỉnh từng bước.

Các loại Decorator trong TypeScript

Có bốn loại trình trang trí chính trong TypeScript:

• Người trang trí lớp học
• Phương pháp trang trí
• Phụ kiện trang trí
• Người trang trí bất động sản

Kích hoạt Decorators trong TypeScript

Để sử dụng trình trang trí trong dự án TypeScript, tùy chọn experimentalDecorators phải được bật trong tệp tsconfig.json.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Tạo một trình trang trí lớp

Trình trang trí lớp được áp dụng cho hàm tạo của một lớp. Chúng hữu ích để thêm siêu dữ liệu hoặc chức năng vào lớp. Sau đây là ví dụ về cách tạo trình trang trí lớp đơn giản.

function logClass(constructor: Function) {
  console.log(`Class ${constructor.name} is created`);
}

@logClass
class Person {
  constructor(public name: string) {}
}

const person = new Person("John");
// Output: Class Person is created

Tạo một phương thức trang trí

Trình trang trí phương thức được áp dụng cho các phương thức lớp. Chúng có thể được sử dụng để sửa đổi hoặc quan sát hành vi của phương thức. Dưới đây là một ví dụ về trình trang trí phương thức ghi lại quá trình thực thi phương thức.

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments:`, args);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

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

const calc = new Calculator();
calc.add(2, 3); 
// Output: Method add is called with arguments: [2, 3]

Tạo một Trình trang trí Thuộc tính

Trình trang trí thuộc tính có thể được sử dụng để quan sát hoặc sửa đổi thuộc tính. Sau đây là ví dụ về trình trang trí thuộc tính đảm bảo rằng thuộc tính có giá trị mặc định.

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let propertyValue = value;

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

    const setter = function (newValue: any) {
      propertyValue = newValue || value;
    };

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

class User {
  @defaultValue('Anonymous')
  name!: string;
}

const user = new User();
console.log(user.name); // Output: Anonymous
user.name = 'Alice';
console.log(user.name); // Output: Alice

Tạo một trình trang trí tham số

Bộ trang trí tham số được áp dụng cho các tham số của phương thức. Chúng có thể hữu ích cho các tác vụ như xác thực hoặc ghi nhật ký đối số. Sau đây là ví dụ về bộ trang trí tham số.

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is being decorated`);
}

class Vehicle {
  drive(@logParameter speed: number) {
    console.log(`Driving at speed ${speed}`);
  }
}

const vehicle = new Vehicle();
vehicle.drive(50);
// Output: Parameter at index 0 in method drive is being decorated

Phần kết luận

Decorator trong TypeScript cung cấp khả năng siêu lập trình mạnh mẽ có thể nâng cao và mở rộng chức năng của các lớp, phương thức và thuộc tính. Bằng cách sử dụng decorator tùy chỉnh, có thể tạo ra các cấu trúc mã có thể tái sử dụng, hiệu quả và có tổ chức. Hướng dẫn này trình bày cách tạo ra các loại decorator khác nhau: lớp, phương thức, thuộc tính và tham số.