Hiểu về TypeScript Decorator

Trình trang trí TypeScript cung cấp một cách mạnh mẽ để thêm chức năng vào các lớp, phương thức, thuộc tính và tham số khi chạy. Chúng thường được sử dụng trong các khuôn khổ như Angular để tiêm phụ thuộc, ghi nhật ký, xác thực, v.v. Bài viết này sẽ giải thích các loại trình trang trí khác nhau trong TypeScript và cách sử dụng chúng hiệu quả.

TypeScript Decorator là gì?

Decorator trong TypeScript là các hàm được thêm tiền tố là ký hiệu @ và có thể được đính kèm vào nhiều phần tử khác nhau như lớp, phương thức hoặc thuộc tính. Chúng cho phép bạn sửa đổi hành vi của mã mà chúng được đính kèm mà không cần thay đổi trực tiếp mã.

Các loại trang trí

• Trình trang trí lớp: Áp dụng cho toàn bộ lớp.
• Phương thức trang trí: Được áp dụng cho một phương thức trong một lớp.
• Trình trang trí thuộc tính: Được áp dụng cho một thuộc tính trong một lớp.
• Trình trang trí tham số: Được áp dụng cho các tham số của phương thức trong một lớp.

Cách bật Decorators trong TypeScript

Trước khi bạn có thể sử dụng trình trang trí, hãy đảm bảo bật chúng trong tệp tsconfig.json bằng cách đặt "experimentalDecorators" thành true.

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

Người trang trí lớp học

Một trình trang trí lớp được áp dụng cho toàn bộ lớp. Nó hữu ích để thêm siêu dữ liệu hoặc sửa đổi hành vi của một lớp.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

Phương pháp trang trí

Các trình trang trí phương thức được áp dụng cho các phương thức trong một lớp. Các trình trang trí này có thể được sử dụng để sửa đổi hoặc ghi lại hành vi của một phương thức.

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

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

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

Người trang trí bất động sản

Trình trang trí thuộc tính được sử dụng để thêm chức năng cho các thuộc tính trong một lớp. Chúng có thể hữu ích cho việc xác thực hoặc để thêm siêu dữ liệu vào một thuộc tính.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

Bộ trang trí tham số

Bộ trang trí tham số được sử dụng để sửa đổi hoặc ghi lại thông tin về các tham số phương thức.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Phần kết luận

Decorator trong TypeScript cung cấp một cách mạnh mẽ để nâng cao chức năng của mã của bạn mà không cần sửa đổi cấu trúc của nó. Bằng cách hiểu cách sử dụng decorator lớp, phương thức, thuộc tính và tham số, bạn có thể triển khai các tính năng nâng cao như ghi nhật ký, xác thực và tiêm phụ thuộc. Decorator là một tính năng chính trong TypeScript có thể cải thiện đáng kể quy trình phát triển của bạn, đặc biệt là trong các ứng dụng lớn.