Sử dụng Interface trong Typescript (phần 2)

Interfaces (giao diện) là một khái niệm quan trọng cho phép bạn định nghĩa cấu trúc dữ liệu và kiểu dữ liệu tùy chỉnh. Interfaces giúp bạn kiểm tra tính đúng đắn của mã nguồn và xác định ràng buộc trong quá trình phát triển ứng dụng. Trong phần này, mình sẽ tiếp tục tìm hiểu thêm về Interfaces trong TypeScript và tìm hiểu về các khía cạnh quan trọng như Indexable Types, Class Types, Extending Interfaces và Hybrid Types.

Hãy cùng mình đi vào từng phần để hiểu rõ hơn về tính năng của Interfaces trong lập trình TypeScript.

Indexable Types trong TypeScript

Giới thiệu về Indexable Types:

• Indexable Types là một tính năng quan trọng trong TypeScript, cho phép bạn truy cập thuộc tính của đối tượng dưới dạng mảng hoặc chuỗi bằng cách sử dụng chỉ mục (index) thay vì tên thuộc tính cố định.
• Điều này rất hữu ích khi bạn muốn xác định một đối tượng có các thuộc tính có thể truy cập thông qua chỉ mục.

Sử dụng kiểu có thể chỉ mục để truy cập thuộc tính của đối tượng dưới dạng mảng hoặc chuỗi:

Bài viết này được đăng tại [free tuts .net]

• Để sử dụng Indexable Types, bạn cần định nghĩa một Interface với thuộc tính có kiểu "index."
• Cú pháp:

interface MyInterface {
  [key: string]: string;
}

Trong ví dụ trên, MyInterface định nghĩa một kiểu có thể chỉ mục, cho phép bạn truy cập các thuộc tính của đối tượng thông qua chỉ mục kiểu chuỗi.

Ví dụ minh họa

• Mình sẽ tạo một Interface có kiểu có thể chỉ mục để đại diện cho danh sách các học sinh trong một lớp học.

interface StudentList {
  [studentID: string]: string;
}

const students: StudentList = {
  "001": "Alice",
  "002": "Bob",
  "003": "Charlie",
};

console.log(students["001"]); // In ra: "Alice"
console.log(students["003"]); // In ra: "Charlie"

Trong ví dụ này, mình đã sử dụng kiểu có thể chỉ mục để truy cập danh sách học sinh theo mã học sinh.

Class Types trong TypeScript

Định nghĩa và sử dụng Class Types trong Interface:

• Class Types cho phép bạn định nghĩa kiểu dữ liệu cho các lớp (class) trong TypeScript.
• Để sử dụng Class Types trong một Interface, bạn cần định nghĩa một phương thức có tên "new" để tạo ra một đối tượng thuộc lớp cụ thể.

Sử dụng Class Types để định nghĩa cấu trúc của một lớp:

• Để sử dụng Class Types, bạn định nghĩa một Interface và sử dụng "new" để định nghĩa kiểu của đối tượng thuộc lớp.
• Cú pháp:

interface MyClass {
  new (): MyInterface;
}

Ví dụ minh họa về việc sử dụng Class Types:

• mình sẽ định nghĩa một Interface "Person" và sử dụng Class Types để định nghĩa kiểu của lớp "Student" và "Teacher."

interface Person {
  name: string;
}

class Student implements Person {
  constructor(public name: string, public studentID: string) {}
}

class Teacher implements Person {
  constructor(public name: string, public employeeID: string) {}
}

const studentClass: new () => Student = Student;
const teacherClass: new () => Teacher = Teacher;

const student: Person = new studentClass();
const teacher: Person = new teacherClass();

student.name = "Alice";
teacher.name = "Mr. Smith";

console.log(student.name); // In ra: "Alice"
console.log(teacher.name); // In ra: "Mr. Smith"

Trong ví dụ này, mình đã sử dụng Class Types để định nghĩa kiểu của lớp "Student" và "Teacher" trong Interface "Person" và tạo ra các đối tượng thuộc hai lớp này.

Kế thừa Interfaces trong TypeScript

Khái niệm về kế thừa Interfaces:

• Trong TypeScript, bạn có thể kế thừa một Interface từ một hoặc nhiều Interfaces khác để mở rộng và tái sử dụng định nghĩa của Interface.

Cách sử dụng kế thừa Interfaces để mở rộng và tái sử dụng định nghĩa của Interface:

• Để kế thừa một Interface từ một khác, bạn sử dụng từ khóa "extends."

• Ví dụ:

interface Person {
  name: string;
}

interface Employee extends Person {
  employeeID: string;
}

Trong ví dụ trên, Interface "Employee" kế thừa từ Interface "Person," nghĩa là nó bao gồm tất cả thuộc tính của "Person" và thêm thuộc tính "employeeID."

Ví dụ minh họa về kế thừa Interfaces

Mình sẽ sử dụng kế thừa Interfaces để định nghĩa kiểu dữ liệu cho một đối tượng "Employee."

interface Person {
  name: string;
}

interface ContactInfo {
  email: string;
  phone: string;
}

interface Employee extends Person, ContactInfo {
  employeeID: string;
}

const employee: Employee = {
  name: "Alice",
  email: "alice@example.com",
  phone: "123-456-7890",
  employeeID: "E12345",
};

console.log(employee.name); // In ra: "Alice"
console.log(employee.email); // In ra: "alice@example.com"
console.log(employee.phone); // In ra: "123-456-7890"
console.log(employee.employeeID); // In ra: "E12345"

Trong ví dụ này, Interface "Employee" kế thừa từ cả "Person" và "ContactInfo," cho phép đối tượng "employee" có tất cả các thuộc tính của cả ba Interfaces.

Kiểu hỗn hợp (Hybrid Types)

Định nghĩa và sử dụng kiểu hỗn hợp trong Interface:

• Kiểu hỗn hợp (Hybrid Types) cho phép bạn kết hợp cả thuộc tính và phương thức trong một đối tượng, tạo ra một đối tượng đa chức năng.

Ví dụ minh họa về việc sử dụng kiểu hỗn hợp:

• Mình sẽ định nghĩa một Interface "Person" có thuộc tính "name" và một phương thức "sayHello," sau đó sử dụng kiểu hỗn hợp để kết hợp cả thuộc tính và phương thức.

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

const greeter: Person = {
  name: "Alice",
  sayHello: () => {
    console.log(`Hello, my name is ${greeter.name}.`);
  },
};

greeter.sayHello(); // In ra: "Hello, my name is Alice."

Trong ví dụ này, đối tượng "greeter" được kết hợp từ Interface "Person" và có cả thuộc tính "name" và phương thức "sayHello."

Kết bài

Trong bài viết này, mình đã tìm hiểu về cách sử dụng Interface trong TypeScript, một tính năng mạnh mẽ cho việc định nghĩa kiểu dữ liệu và giao diện cho các đối tượng trong chương trình. Ta đã đi sâu vào các khía cạnh cơ bản của Interface cũng như các tính năng mở rộng và sự đa dạng của chúng.

• Bắt đầu bằng việc giới thiệu về Interface, là một cách để định nghĩa cấu trúc dữ liệu của đối tượng, bao gồm thuộc tính và phương thức.

• Tiếp theo, mình đã tìm hiểu về các khái niệm quan trọng bao gồm Optional Properties, cho phép ta định nghĩa thuộc tính có thể tồn tại hoặc không, thuộc tính readonly để đảm bảo tính không thay đổi của dữ liệu, và sự khác biệt giữa const và readonly.

• Sau đó là kiểu Function Types, cho phép định nghĩa các hàm và phương thức trong Interface, giúp kiểm tra kiểu dữ liệu của các hàm.

• Tiếp theo, mình đã nghiên cứu về Indexable Types, cung cấp khả năng truy cập các thuộc tính của đối tượng như mảng hoặc chuỗi.

• Mình cũng đã xem xét cách sử dụng Class Types để định nghĩa cấu trúc của một lớp và kế thừa Interfaces để mở rộng và tái sử dụng định nghĩa.

• Cuối cùng, đã tìm hiểu về kiểu hỗn hợp (Hybrid Types), cho phép kết hợp cả thuộc tính và phương thức trong một đối tượng, tạo ra đối tượng đa chức năng.

Sử dụng Interface trong TypeScript giúp mình xây dựng mã nguồn dễ đọc, bảo trì và kiểm tra tính đúng đắn của chương trình. Nó cũng giúp tạo ra các đối tượng có cấu trúc chuẩn, đảm bảo tính nhất quán và tương tác dễ dàng giữa các thành phần của ứng dụng. Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng Interface trong TypeScript và cách áp dụng chúng trong các dự án thực tế.