So sánh Interface và Type (aka Type Alias) trong TypeScript

Trong TypeScript, cả Interface và Type Alias đều được sử dụng để định nghĩa kiểu dữ liệu, nhưng chúng có những điểm khác biệt riêng và có thể phù hợp với các trường hợp khác nhau. Bài viết này sẽ so sánh hai khái niệm này, cung cấp ví dụ cụ thể và phân tích chúng.

Interface

Interface cho phép bạn định nghĩa form của Object. Interface chủ yếu được sử dụng để khai báo các loại đối tượng và thường được dùng trong lập trình hướng đối tượng. Interface có thể extend (kế thừa, mở rộng) và merge (hợp nhất lại), điều này giúp cho việc mở rộng Model trở nên dễ dàng, linh hoạt và dễ tái sử dụng hơn.

Ví dụ về Interface

interface User { name: string; age: number; email?: string; // Thuộc tính tùy chọn
} const user: User = { name: "John", age: 30
};

Phân tích ví dụ

• Interface User định nghĩa ba thuộc tính name, age và email. Trong đó, email là tùy chọn.
• Đối tượng user được khai báo theo interface User, phải tuân thủ các thuộc tính đã được định nghĩa trong interface.

Type Alias

Type Alias cho phép bạn tạo một tên gọi mới cho bất kỳ kiểu dữ liệu nào, không chỉ giới hạn ở các đối tượng. Type Alias có thể sử dụng với các primitive type (kiểu nguyên thủy), union type, intersection, tuple, ...

Ví dụ về Type Alias

type User = { name: string; age: number; email?: string;
}; const user: User = { name: "John", age: 30
}; type ID = number | string; // Union Type
let userId: ID = 123;
userId = "abc123";

Phân tích ví dụ

• Type Alias User định nghĩa kiểu dữ liệu tương tự như interface User ở trên.
• Type Alias ID là một kiểu liên hợp (union type), cho phép userId có thể là kiểu number hoặc string.

So sánh Interface và Type Alias

Điểm tương đồng

• Đều được sử dụng để định nghĩa kiểu dữ liệu
• Hỗ trợ Optional Field (các thuộc tính không bắt buộc)

Điểm khác biệt

1. Kế thừa/mở rộng (Extending):

   • Interface hỗ trợ mở rộng (extend) và hợp nhất (declaration merging), cho phép bạn dễ dàng extend các kiểu dữ liệu mà không phải thay đổi cấu trúc ban đầu.
   • Type Alias không hỗ trợ hợp nhất (declaration merging), nhưng có thể sử dụng với các kiểu giao hợp (intersection) để tạo ra kiểu dữ liệu mới.

2. Kết hợp với các Type khác:

   • Inteface chỉ có thể extend Type khác, không thể tương tác bằng các cách khác.
   • Type Alias có thể sử dụng với các primitive type, union type, intersection, tuple, v.v.

3. Hiệu suất và tối ưu hóa:

   • Interface thường được tối ưu hóa tốt hơn trong quá trình compile.

Dưới đây là ví dụ phức tạp hơn về cách sử dụng Interface và Type Alias với union và intersection.

interface Person { name: string; age: number;
} interface Employee extends Person { employeeId: number;
} type Developer = Person & { skills: string[];
}; const employee: Employee = { name: "Alice", age: 28, employeeId: 1234
}; const developer: Developer = { name: "Bob", age: 32, skills: ["JavaScript", "TypeScript"]
};

• Employee mở rộng từ Person bằng cách sử dụng interface, thêm thuộc tính employeeId.
• Developer là một kiểu giao hợp (intersection type) giữa Person và một đối tượng mới có thuộc tính skills.

Kết luận

Interface và Type Alias đều là những công cụ mạnh mẽ trong TypeScript, nhưng mỗi cái có ưu và nhược điểm riêng. Interface phù hợp với các tình huống cần mở rộng và hợp nhất kiểu dữ liệu, trong khi Type Alias linh hoạt hơn với nhiều kiểu dữ liệu khác nhau. Việc lựa chọn giữa chúng phụ thuộc vào ngữ cảnh cụ thể của dự án và phong cách lập trình của bạn.