So sánh type và interface trong typescript

Trong TypeScript, cả type và interface đều được sử dụng để định nghĩa các kiểu dữ liệu, nhưng chúng có một số điểm khác biệt và sử dụng trong các trường hợp khác nhau. Dưới đây là so sánh và ví dụ minh họa cho cả hai:

1. Khái niệm và cú pháp cơ bản

• Type Alias: Dùng để đặt tên cho bất kỳ kiểu dữ liệu nào.
• Interface: Dùng để định nghĩa cấu trúc của một đối tượng.

2. So sánh

• Khả năng mở rộng (Extensibility):
  • interface có thể được mở rộng (extend) bằng cách sử dụng từ khóa extends hoặc bằng cách khai báo lại interface với cùng tên.
  • type không thể được khai báo lại, nhưng có thể sử dụng & (intersection) để kết hợp nhiều kiểu.
• Hợp nhất khai báo (Declaration Merging):
  • interface hỗ trợ hợp nhất khai báo, cho phép bạn khai báo nhiều lần cùng một tên interface và TypeScript sẽ tự động hợp nhất chúng.
  • type không hỗ trợ tính năng này.
• Sử dụng với các loại khác:
  • type có thể được sử dụng để đặt tên cho các kiểu phức tạp như union types, tuple types, v.v.
  • interface chủ yếu được sử dụng để định nghĩa cấu trúc đối tượng.

3. Ví dụ minh họa

Interface

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

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 1234
};

Type Alias

type Person = {
  name: string;
  age: number;
};

type Employee = Person & {
  employeeId: number;
};

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 1234
};

Union và Intersection Types với Type Alias

type StringOrNumber = string | number;

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

type NamedPoint = Point & {
  name: string;
};

const point: NamedPoint = {
  x: 10,
  y: 20,
  name: "A"
};

Khi nào sử dụng type và interface?

• Sử dụng interface khi bạn cần khai báo một cấu trúc đối tượng và có khả năng hợp nhất khai báo.
• Sử dụng type khi bạn cần định nghĩa các kiểu phức tạp như union, intersection, hoặc đặt tên cho các kiểu dữ liệu khác nhau mà không phải là đối tượng.

Hy vọng các thông tin trên giúp bạn hiểu rõ hơn về sự khác nhau giữa type và interface trong TypeScript!