Khác nhau giữa Type vs Interface trong Typescript

Trong bài viết này, chúng ta cùng xem sự khác biệt giữa type vs interface trong Typescript nhé!

Type vs Interface

Primitive types

Điểm khác biệt dễ nhận thấy nhất giữa type vs interface đó là ta chỉ có thể sử dụng Primitive types nếu ta sử dụng type.

type Name = string;
type Age = number;

Tuple

Khi bạn muốn sử dụng Tuple, chúng ta sẽ phải dùng type. Các bạn có thể đọc bài viết tại đây để hiểu Tuple trong Typescript là gì: Typescript tuple là gì?.

type Data = [number, string];

Union

Điểm khác biệt tiếp theo đó là ta chỉ có thể sử dụng union với type.

type Age = number | string;
type color = "blue" | "red" | "yellow" | "purple";

extends

Cả interface và type đều có thể extend. Tuy nhiên chúng có cú pháp khác nhau, chúng ta cùng xem thử nhé!

Với interface để extend, ta sử dụng keyword extends:

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

Với type, ta sử dụng Intersection Types(&):

type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: boolean 
}

Đối với Class, ta có thể extends từ interface, nhưng sẽ không thể sử dụng Class để extends type.

Declaration Merging

Với interface, ta có thể thêm fields mới vào một interface đã khai báo, các member của interface có cùng tên sẽ được gộp chung lại, cùng coi ví dụ bên dưới để hiểu rõ hơn nhé:

interface User { age: number; }
interface User { name: string; }
// Hợp nhất => interface User { age: number; name: string; }

const newUser: User = { age: 15, name: 'nguyen anh vu' };

Kết luận

Như vậy là chúng ta đã tìm hiểu xong sự khác nhau giữa type và interface trong Typescript. Bài viết dựa trên kinh nghiệm cá nhân nên nếu có sai sót nào, các bạn có thể liên hệ với mình nhé ^^. Cảm ơn các bạn!

Chúc các bạn học tốt. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé!