Interface vs Type trong TypeScript

TypeScript, ngôn ngữ lập trình mạnh mẽ được xây dựng dựa trên JavaScript, cung cấp công cụ tuyệt vời để quản lý kiểu dữ liệu. Trong đó, interface và type là hai cách phổ biến để định nghĩa kiểu dữ liệu. Tuy nhiên, khi nào nên dùng interface? Khi nào nên chọn type? Bài viết này sẽ làm rõ sự khác biệt giữa hai công cụ này và cung cấp hướng dẫn chi tiết để sử dụng chúng đúng cách.

Interface

Định nghĩa

interface được sử dụng để định nghĩa cấu trúc của một đối tượng, cho phép mô tả các thuộc tính và phương thức mà đối tượng đó cần có.

Ví dụ:

interface User {
  id: number;
  name: string;
  email?: string; // Thuộc tính tùy chọn
}

Ưu điểm nổi bật

• Khả năng mở rộng (Extensibility):
  interface có thể dễ dàng mở rộng bằng từ khóa extends.

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

• Hợp nhất khai báo (Declaration Merging):
  Bạn có thể khai báo nhiều interface cùng tên, và TypeScript sẽ tự động gộp chúng lại.

interface User {
  age: number;
}

Kết quả:

const user: User = { id: 1, name: "Alice", age: 25 };

Khi nào nên dùng interface?

• Khi định nghĩa cấu trúc dữ liệu của một đối tượng.
• Khi cần kế thừa hoặc mở rộng kiểu dữ liệu.
• Khi làm việc với các thư viện hỗ trợ mạnh mẽ cho interface.

Type

Định nghĩa

type là cách định nghĩa một kiểu dữ liệu linh hoạt, không chỉ giới hạn ở đối tượng mà còn có thể là các union, intersection, hoặc bất kỳ kiểu phức tạp nào khác.

Ví dụ:

type User = {
  id: number;
  name: string;
  email?: string;
};

Ưu điểm nổi bật

• Linh hoạt với Union và Intersection:
  type hỗ trợ định nghĩa kiểu dữ liệu phức tạp bằng cách sử dụng union (|) và intersection (&).

type ID = number | string; // Union
type UserWithRoles = User & { roles: string[] }; // Intersection

• Khả năng định nghĩa kiểu bất kỳ:
  Bạn có thể sử dụng type để định nghĩa các kiểu dữ liệu khác nhau, từ cơ bản đến phức tạp.

type Callback = (data: string) => void;
type Point = [number, number];

Khi nào nên dùng type?

• Khi cần định nghĩa các kiểu dữ liệu phức tạp hoặc hỗn hợp.
• Khi muốn sử dụng union hoặc intersection.
• Khi không cần mở rộng hoặc hợp nhất khai báo như interface.

So sánh chi tiết

Lời khuyên sử dụng

• Chọn interface khi làm việc với đối tượng hoặc cần mở rộng kiểu dữ liệu thông qua kế thừa.
• Chọn type khi định nghĩa kiểu phức tạp, chẳng hạn như union, intersection, hoặc kiểu dữ liệu không phải là đối tượng.

Ngoài ra, trong một số dự án, bạn có thể kết hợp cả hai để tận dụng lợi thế của từng loại:

interface BaseUser {
  id: number;
  name: string;
}

type UserWithStatus = BaseUser & { status: "active" | "inactive" };

Kết luận

Hiểu rõ sự khác biệt giữa interface và type sẽ giúp bạn tối ưu hóa việc định nghĩa kiểu dữ liệu trong TypeScript, đồng thời tăng tính dễ đọc và bảo trì của mã nguồn. Hãy sử dụng chúng đúng lúc, đúng chỗ để phát huy tối đa hiệu quả trong dự án của bạn.

Tham khảo:

• https://www.typescriptlang.org/docs/handbook/2/types-from-types.html
• https://www.typescriptlang.org/docs/handbook/2/types-from-types.html