Giới thiệu

Nếu bạn đã làm việc với TypeScript một thời gian, bạn chắc chắn đã gặp cả types và interfaces. Ban đầu, chúng có vẻ giống nhau, nhưng khi nào thì nên sử dụng cái này thay vì cái kia? Hãy cùng khám phá một cách đơn giản và thực tiễn.

Types là gì?

Type trong TypeScript giống như một nhãn bạn gán cho một giá trị. Nó cho trình biên dịch biết loại dữ liệu nào mong đợi. Với type, bạn có thể mô tả:

• Đối tượng
• Các kiểu nguyên thủy như string, number, boolean
• Các giá trị hợp nhất (unions)
• Các giá trị giao nhau (intersections)
• Hàm

Ví dụ:

// Định nghĩa kiểu cho người dùng

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

type Status = "active" | "inactive" | "suspended";

Trong đoạn mã trên, User mô tả cấu trúc đối tượng trong khi Status là một hợp nhất của các chuỗi.

Types rất linh hoạt vì chúng cho phép kết hợp. Bạn có thể sử dụng hợp nhất, giao nhau và các kiểu đã ánh xạ để biểu diễn các cấu trúc phức tạp.

Interfaces là gì?

Interface cũng định nghĩa hình dạng của một đối tượng. Nó thường được sử dụng để mô tả đối tượng và lớp.

Ví dụ:

// Định nghĩa giao diện cho người dùng

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

Giao diện này trông gần như giống hệt với ví dụ type trước đó. Điểm mạnh của interfaces là khả năng mở rộng và hợp nhất.

Sự khác biệt chính

Mở rộng

• Interfaces có thể mở rộng các giao diện khác.
• Types có thể mở rộng các kiểu khác bằng cách sử dụng giao nhau.

// Định nghĩa giao diện cho cá nhân
interface Person {
  id: number;
}

// Employee mở rộng từ Person
interface Employee extends Person {
  role: string;
}

// Định nghĩa kiểu cho động vật

type Animal = { species: string; };
type Dog = Animal & { breed: string; };

Cả hai đều đạt được kết quả tương tự, nhưng cú pháp khác nhau.

Hợp nhất khai báo

Interfaces hỗ trợ một cái gọi là hợp nhất khai báo. Nếu bạn khai báo cùng một giao diện hai lần, TypeScript sẽ kết hợp chúng lại.

// Khai báo giao diện cho xe hơi
interface Car {
  brand: string;
}

// Khai báo giao diện cho xe hơi
interface Car {
  model: string;
}

const myCar: Car = {
  brand: "Toyota",
  model: "Corolla"
};

Với type, điều này là không thể.

Trường hợp sử dụng

• Sử dụng type khi bạn cần hợp nhất, giao nhau hoặc các biểu thức kiểu phức tạp hơn.
• Sử dụng interface khi bạn làm việc với đối tượng, lớp hoặc muốn tận dụng hợp nhất khai báo.

Nên sử dụng cái nào?

Trên thực tế, cả types và interfaces đều là lựa chọn hợp lệ. Nhóm phát triển TypeScript đã nói rằng bạn không nên quá lo lắng về việc sử dụng cái nào. Nếu bạn đang mô hình hóa các kết hợp dữ liệu phức tạp, types có thể cảm thấy tự nhiên hơn. Nếu bạn đang thiết kế hình dạng của các đối tượng hoặc lớp, interfaces có thể hợp lý hơn.

Một quy tắc tốt là:

• Bắt đầu với một interface khi mô tả các đối tượng.
• Sử dụng types khi bạn cần nhiều linh hoạt hơn.

Những thực tiễn tốt nhất

• Sử dụng types cho các kiểu phức tạp: Nếu bạn cần mô hình hóa các kiểu dữ liệu phức tạp, hãy chọn types.
• Sử dụng interfaces cho các lớp: Nếu bạn đang làm việc với các lớp và muốn dễ dàng mở rộng, hãy chọn interfaces.

Những cạm bẫy thường gặp

• Bối rối giữa types và interfaces: Nhiều lập trình viên mới có thể nhầm lẫn giữa hai khái niệm này; hãy luôn nhớ rằng cả hai đều có mục đích sử dụng riêng.
• Quá chú trọng vào cú pháp: Đừng quá lo lắng về cú pháp; hãy chọn cái nào phù hợp với tình huống của bạn.

Mẹo hiệu suất

• Chọn đúng khái niệm: Sử dụng đúng khái niệm sẽ giúp mã của bạn dễ đọc hơn và dễ bảo trì hơn.
• Giảm thiểu sự phức tạp: Tránh lồng ghép quá nhiều loại và giao diện; điều này có thể dẫn đến mã khó hiểu.

Giải quyết sự cố

• Khi gặp lỗi: Nếu bạn gặp lỗi khi sử dụng types hoặc interfaces, hãy kiểm tra lại cú pháp và cách khai báo của bạn.
• Kiểm tra lại tính tương thích: Đôi khi, sự không tương thích giữa types và interfaces có thể gây ra vấn đề; hãy kiểm tra kỹ lưỡng.

Kết luận

Types và interfaces trong TypeScript không phải là đối thủ. Chúng là những công cụ có sự chồng chéo trong nhiều lĩnh vực nhưng cũng có những điểm mạnh độc đáo. Càng làm việc với chúng, bạn sẽ càng tự nhiên hơn trong việc quyết định cái nào nên sử dụng trong từng tình huống.

Vậy lần tới khi bạn viết TypeScript, đừng quá suy nghĩ. Hãy chọn cái mà bạn cảm thấy phù hợp cho vấn đề bạn đang giải quyết và nhớ rằng cả hai đều là công dân hàng đầu trong ngôn ngữ này.

👉 Bạn có mệt mỏi với những công việc lặp đi lặp lại, các lệnh khó hiểu hoặc việc gỡ lỗi không có hồi kết? Nền tảng này được xây dựng để làm mọi thứ trở nên đơn giản hơn. Nó miễn phí, mã nguồn mở và được tạo ra với tâm huyết cho lập trình viên.
👉 Khám phá các công cụ: FreeDevTools
👉 Hỗ trợ repo: freedevtools