Interface và Type Alias

Bài 6 – Interface và Type Alias trong TypeScript theo cách đơn giản, trực quan và tiêu chuẩn.

18/11/2025 DaiPhan
Bài 6 / 17

Interface và Type Alias

Trong mọi dự án TypeScript, việc mô tả cấu trúc dữ liệu là bước quan trọng để code rõ ràng và tránh lỗi. InterfaceType Alias là hai công cụ mạnh mẽ giúp bạn định nghĩa mô hình dữ liệu một cách chuẩn xác, dễ mở rộng và dễ quản lý.


1. Nội dung chính

  • Interface là gì, ưu điểm và khi nào nên dùng.
  • Type Alias là gì, khác Interface ở điểm nào.
  • Cách mở rộng Interface (extends).
  • Union & Intersection với Type Alias.
  • Quy tắc chọn Interface hay Type trong dự án thực tế.

2. Ví dụ

// 1. Interface mô tả object
interface User {
  id: number;
  name: string;
  isActive: boolean;
}

const u: User = {
  id: 1,
  name: "Alice",
  isActive: true,
};
// 2. Mở rộng interface (extends)
interface Admin extends User {
  role: "admin" | "manager";
}

const admin: Admin = {
  id: 2,
  name: "Bob",
  isActive: true,
  role: "admin",
};
// 3. Type Alias mô tả nhiều dạng dữ liệu
type Product = {
  id: number;
  title: string;
  price: number;
};

// Cho phép union
type ApiStatus = "success" | "error" | "loading";

// Intersection: gộp kiểu
type Timestamps = { createdAt: Date; updatedAt: Date };
type ProductWithTime = Product & Timestamps;

const p: ProductWithTime = {
  id: 10,
  title: "Keyboard",
  price: 200,
  createdAt: new Date(),
  updatedAt: new Date(),
};

## 3. Kiến thức trọng tâm

1. **Interface phù hợp khi mô tả object và thường dùng trong mô hình domain**  
   Dễ mở rộng bằng extends và là chuẩn trong các dự án lớn.

2. **Type Alias linh hoạt hơn Interface**  
   Dùng cho union, primitive, tuple hoặc composition phức tạp.

3. **Khi chọn Interface hay Type**  
   - Chọn Interface khi mô tả entity/business model.
   - Chọn Type khi cần union, intersection hoặc xử lý kiểu nâng cao.

## 4. Bài tập nhanh

- Tạo interface Employee gồm: id, name, position.
- Tạo type ResponseStatus gồm: "ok" | "error".
- Tạo type EmployeeWithTime = Employee & { createdAt: Date }.

## 5. Kết luận

Interface và Type Alias là nền tảng để thiết kế hệ thống dữ liệu trong TypeScript. Hiểu đúng cách chọn và sử dụng chúng sẽ giúp bạn viết code rõ ràng, ít lỗi và dễ mở rộng hơn khi làm dự án thực tế.
17 bài học
Bài 6
Tiến độ hoàn thành 35%

Đã hoàn thành 6/17 bài học