Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về Decorators trong Interface trong TypeScript. Decorators là một khái niệm quan trọng trong TypeScript, giúp chúng ta thêm các tính năng hoặc hành vi vào các lớp, phương thức, thuộc tính hoặc tham số mà không cần thay đổi mã nguồn gốc của chúng.

Khái niệm Decorators

Trước khi đi sâu vào Decorators trong Interface, hãy cùng tìm hiểu về Decorators.

Decorators là một khái niệm trong TypeScript, cho phép chúng ta thêm các tính năng hoặc hành vi vào các lớp, phương thức, thuộc tính hoặc tham số mà không cần thay đổi mã nguồn gốc của chúng. Decorators được đánh dấu bằng ký hiệu @.

Ví dụ về Decorators:

function readonly(target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

Trong ví dụ trên, @readonly là một Decorator. Nó thay đổi hành vi của phương thức name để không thể ghi đè.

Decorators trong Interface

Trong TypeScript, Interface được sử dụng để định nghĩa hợp đồng cho các lớp. Nó chứa chỉ định về những gì một lớp phải làm nhưng không cung cấp chi tiết về cách thực hiện.

Tuy nhiên, TypeScript không hỗ trợ trực tiếp việc sử dụng Decorators trong Interface. Thay vào đó, chúng ta có thể sử dụng Decorators trong các lớp thực thi Interface.

Ví dụ:

interface IPerson {
  name: string;
  sayHello(): void;
}

function log(target, key, descriptor) {
  let originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling "${key}" with`, args);
    let result = originalMethod.apply(this, args);
    console.log(`Result: ${result}`);
    return result;
  }
  return descriptor;
}

class Person implements IPerson {
  name: string;

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

  @log
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

Trong ví dụ trên, @log là một Decorator được sử dụng trong lớp Person thực thi Interface IPerson. Nó ghi lại thông tin khi phương thức sayHello được gọi.

Hy vọng với bài viết này, bạn đã hiểu rõ hơn về Decorators và cách sử dụng chúng trong Interface trong TypeScript.