Giới thiệu về Giao diện TypeScript dành cho Người mới bắt đầu

Giao diện TypeScript là một tính năng mạnh mẽ cho phép bạn xác định cấu trúc của các đối tượng, đảm bảo chúng tuân thủ các yêu cầu hình dạng cụ thể. Hướng dẫn này sẽ giới thiệu cho bạn những điều cơ bản về giao diện TypeScript, bao gồm cách xác định và sử dụng chúng hiệu quả.

Giao diện là gì?

Giao diện trong TypeScript là cách mô tả hình dạng của một đối tượng. Nó cho phép bạn xác định các thuộc tính và phương thức mà một đối tượng nên có, cũng như các kiểu của chúng. Giao diện giúp bạn thực thi tính nhất quán và rõ ràng trong mã của mình.

Định nghĩa một giao diện

Để xác định một giao diện, hãy sử dụng từ khóa interface theo sau là tên giao diện và hình dạng đối tượng:

interface Person {
  name: string;
  age: number;
}

Trong ví dụ này, giao diện Person chỉ định rằng đối tượng Person phải có name thuộc kiểu string và age thuộc kiểu number.

Sử dụng Giao diện

Sau khi bạn đã định nghĩa một giao diện, bạn có thể sử dụng nó để kiểm tra kiểu đối tượng, tham số hàm và giá trị trả về. Điều này đảm bảo rằng các đối tượng tuân theo hình dạng đã định nghĩa.

Sử dụng Giao diện với Đối tượng

Sau đây là cách sử dụng giao diện Person để kiểm tra kiểu của một đối tượng:

const person: Person = {
  name: "Alice",
  age: 30
};

Trong ví dụ này, đối tượng person tuân thủ giao diện Person, đảm bảo nó có cả name và age với các kiểu dữ liệu chính xác.

Sử dụng Giao diện với Chức năng

Giao diện cũng có thể được sử dụng để kiểm tra kiểu tham số hàm và giá trị trả về:

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

Trong ví dụ này, hàm greet chấp nhận tham số có kiểu Person và trả về tin nhắn chào hỏi.

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

Giao diện có thể bao gồm các thuộc tính tùy chọn bằng cách sử dụng trình sửa đổi ?. Điều này cho biết thuộc tính có thể có hoặc không có:

interface Person {
  name: string;
  age: number;
  email?: string;
}

Trong ví dụ này, email là thuộc tính tùy chọn có thể được bao gồm hoặc không trong đối tượng Person.

Thuộc tính chỉ đọc

Bạn cũng có thể định nghĩa các thuộc tính là chỉ đọc, nghĩa là chúng không thể được sửa đổi sau khi khởi tạo:

interface Person {
  readonly name: string;
  age: number;
}

Trong ví dụ này, thuộc tính name chỉ đọc và không thể thay đổi sau khi đã thiết lập.

Mở rộng giao diện

Giao diện có thể mở rộng các giao diện khác, cho phép bạn xây dựng dựa trên các hình dạng hiện có:

interface Employee extends Person {
  employeeId: number;
}

Trong ví dụ này, giao diện Employee mở rộng giao diện Person bằng cách thêm thuộc tính employeeId.

Phần kết luận

Giao diện TypeScript là một tính năng cơ bản để xác định và áp dụng hình dạng đối tượng trong mã của bạn. Bằng cách sử dụng giao diện, bạn có thể đảm bảo tính nhất quán, cải thiện khả năng đọc mã và tận dụng khả năng kiểm tra kiểu mạnh mẽ của TypeScript. Bắt đầu kết hợp giao diện vào các dự án TypeScript của bạn để tạo mã mạnh mẽ và dễ bảo trì hơn.