Nhập bí danh so với giao diện

Trong TypeScript, chúng ta có thể xác định cấu trúc của các đối tượng phức tạp theo hai cách chính: sử dụng Giao diện (interface) hoặc Loại bí danh (type). Cả hai đều dùng để mô tả "hình dạng" của một đối tượng hoặc cấu trúc dữ liệu, nhưng chúng có một số khác biệt cơ bản.

Giao diện (interface)

Một giao diện xác định một hợp đồng về cấu trúc của một đối tượng. Đây là công cụ tiêu chuẩn để mô tả hình dạng đối tượng và API công khai theo cách có thể mở rộng.

interface Book {
  title: string;
  pages: number;
  author?: string; // Optional property (can be omitted)
}

const myBook: Book = {
  title: 'The Lord of the Rings',
  pages: 1200,
};

Dấu chấm hỏi (?) đánh dấu thuộc tính là tùy chọn. Đối tượng myBook hợp lệ ngay cả khi nó bỏ qua thuộc tính author.

Nhập bí danh (type)

Bí danh loại cho phép bạn liên kết tên mới với bất kỳ loại hiện có nào, bao gồm các loại nguyên thủy, kết hợp, bộ dữ liệu hoặc toàn bộ cấu trúc đối tượng.

type Point = {
  x: number;
  y: number;
};

const coordinates: Point = { x: 10, y: 20 };

Sự khác biệt chính: Hợp nhất mở rộng và khai báo

Mặc dù interface và type có thể hoán đổi cho nhau trong hầu hết các trường hợp sử dụng thông thường nhưng chúng thể hiện hai điểm khác biệt quan trọng:

1. Khả năng mở rộng (Kế thừa)

Giao diện được mở rộng bằng từ khóa extends:

interface User {
  username: string;
}

interface Admin extends User {
  privileges: string[];
}

Không thể mở rộng bí danh loại bằng extends nhưng có thể kết hợp chúng bằng toán tử intersection (&):

type User = {
  username: string;
};

type Admin = User & {
  privileges: string[];
};

2. Tuyên bố sáp nhập

Nhiều giao diện có cùng tên trong cùng một phạm vi sẽ được trình biên dịch tự động hợp nhất:

interface User {
  name: string;
}
interface User {
  email: string;
}
// Now User has both 'name' and 'email'!

Hành vi này không được hỗ trợ bởi bí danh loại: khai báo cùng một type hai lần sẽ gây ra lỗi thời gian biên dịch.

Hãy tự mình thử

Bài tập 1: Giao diện người dùng

Bài tập 2: Bí danh kiểu Point2D

Bài tập 3: Mở rộng giao diện

Bài tập 4: Cấu hình máy chủ