Sử dụng Interface để Mô tả Cấu trúc của Đối tượng trong TypeScript

Trong TypeScript, interface là một công cụ mạnh mẽ giúp bạn định nghĩa cấu trúc của các đối tượng. Interface không chỉ định nghĩa các thuộc tính của đối tượng mà còn có thể bao gồm các phương thức mà đối tượng đó phải có. Bằng cách sử dụng interface, bạn có thể tạo ra các kiểu dữ liệu rõ ràng, dễ bảo trì và dễ hiểu cho các đối tượng trong ứng dụng của mình.

Trong bài học này, chúng ta sẽ tìm hiểu cách sử dụng interface để mô tả cấu trúc của một đối tượng trong TypeScript.

1. Interface là gì?

Interface trong TypeScript cho phép bạn định nghĩa một cấu trúc cho các đối tượng, bao gồm các thuộc tính và phương thức mà các đối tượng này cần có. Điều này giúp cho TypeScript có thể kiểm tra kiểu dữ liệu khi biên dịch và giúp code của bạn trở nên an toàn và dễ hiểu hơn.

Một interface chỉ định các thuộc tính và phương thức mà một đối tượng phải tuân theo mà không cung cấp bất kỳ sự cài đặt nào cho các phương thức đó. Các lớp hoặc đối tượng thực thi interface cần phải cài đặt các phương thức và thuộc tính này.

2. Định nghĩa và sử dụng interface

2.1. Định nghĩa một interface cơ bản

interface Person {
  name: string;
  age: number;
  greet(): void;
}

Trong ví dụ trên:

• Person là một interface mô tả cấu trúc của một đối tượng.
• name là một thuộc tính kiểu string.
• age là một thuộc tính kiểu number.
• greet() là một phương thức không có tham số và không trả về giá trị (void).

2.2. Sử dụng interface để mô tả đối tượng

Để sử dụng interface, bạn có thể khai báo đối tượng tuân theo cấu trúc đã định nghĩa trong interface đó.

const person: Person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.greet(); // Output: Hello, my name is John and I am 30 years old.

Trong ví dụ này:

• person là một đối tượng có kiểu Person, và nó thực thi tất cả các thuộc tính và phương thức được khai báo trong interface Person.
• Đối tượng này có các thuộc tính name, age, và phương thức greet, tất cả đều tuân theo cấu trúc được chỉ định bởi interface.

3. Sử dụng interface với lớp (Class)

Interface có thể được sử dụng với các lớp trong TypeScript để đảm bảo rằng lớp đó thực thi đầy đủ các thuộc tính và phương thức mà interface yêu cầu.

3.1. Định nghĩa lớp với interface

interface Vehicle {
  brand: string;
  model: string;
  startEngine(): void;
}

class Car implements Vehicle {
  brand: string;
  model: string;

  constructor(brand: string, model: string) {
    this.brand = brand;
    this.model = model;
  }

  startEngine(): void {
    console.log(`The ${this.brand} ${this.model} engine has started.`);
  }
}

const car = new Car("Toyota", "Corolla");
car.startEngine(); // Output: The Toyota Corolla engine has started.

Trong ví dụ này:

• Vehicle là một interface mô tả các thuộc tính và phương thức của một phương tiện giao thông.
• Car là một lớp thực thi interface Vehicle, nghĩa là lớp Car phải có các thuộc tính brand, model và phương thức startEngine giống như trong interface.

4. Interface với các thuộc tính tùy chọn và đọc-only

4.1. Thuộc tính tùy chọn

Trong một số trường hợp, bạn có thể muốn một số thuộc tính trong interface là tùy chọn (không bắt buộc phải có). Để làm điều này, bạn có thể sử dụng dấu chấm hỏi ?.

interface Product {
  id: number;
  name: string;
  description?: string; // thuộc tính tùy chọn
}

const product1: Product = {
  id: 1,
  name: "Laptop"
};

const product2: Product = {
  id: 2,
  name: "Phone",
  description: "A smartphone with high-end features"
};

Ở đây:

• description là một thuộc tính tùy chọn trong interface Product. Đối tượng product1 không cần có thuộc tính description, nhưng product2 lại có.

4.2. Thuộc tính đọc-only

Để chỉ định rằng một thuộc tính không thể thay đổi sau khi được khởi tạo, bạn có thể sử dụng từ khóa readonly.

interface Book {
  readonly title: string;
  author: string;
}

const book: Book = {
  title: "TypeScript for Beginners",
  author: "John Doe"
};

// book.title = "New Title"; // Error: Cannot assign to 'title' because it is a read-only property.

Trong ví dụ trên:

• title là một thuộc tính readonly, nghĩa là sau khi đối tượng book được tạo ra, bạn không thể thay đổi giá trị của title.

5. Interface với hàm

Bạn cũng có thể sử dụng interface để định nghĩa kiểu cho các hàm.

interface MathOperation {
  (x: number, y: number): number;
}

const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;

console.log(add(5, 3)); // Output: 8
console.log(multiply(5, 3)); // Output: 15

Trong ví dụ này:

• MathOperation là một interface mô tả một hàm nhận hai tham số x và y kiểu number, và trả về một giá trị kiểu number.
• Các hàm add và multiply thực thi interface này.

6. Kết luận

Sử dụng interface trong TypeScript là một cách tuyệt vời để mô tả cấu trúc của các đối tượng, giúp code của bạn dễ hiểu và dễ bảo trì. Interface giúp đảm bảo rằng các đối tượng, lớp, hoặc hàm tuân theo một cấu trúc nhất định, và cũng hỗ trợ các tính năng mạnh mẽ như thuộc tính tùy chọn, thuộc tính readonly, và khả năng sử dụng với hàm.

Khi sử dụng interface, bạn không chỉ tăng tính bảo mật trong mã nguồn mà còn làm cho code của mình dễ mở rộng và dễ kiểm tra hơn.