Rất ít câu hỏi về TypeScript gây ra nhiều tranh luận như Giao diện TypeScript so với loại. Nhiều bài viết liệt kê những khác biệt từng quan trọng trong các phiên bản cũ nhưng hiện đã lỗi thời. Vì vậy, thay vì lặp lại các tuyên bố, chúng tôi đã thử nghiệm chúng.

Chúng tôi đã viết một tệp thể hiện từng điểm khác biệt và kiểm tra nó bằng TypeScript 5.6.3 ở chế độ nghiêm ngặt. Các lỗi trình biên dịch được trích dẫn dưới đây xuất phát từ lần chạy đó. Hành vi có thể thay đổi giữa các phiên bản, vì vậy hãy kiểm tra phiên bản TypeScript mà dự án của bạn sử dụng. Nếu bạn chưa quen với ngôn ngữ này, hãy bắt đầu với Hướng dẫn TypeScript dành cho người mới bắt đầu của chúng tôi.

Câu trả lời ngắn gọn

interface mô tả hình dạng của một vật thể và có thể được mở rộng hoặc mở lại. Bí danh type đặt tên cho loại bất kỳ nào, bao gồm các đối tượng, kết hợp, bộ dữ liệu và loại hàm. Khi cả hai đều có thể hoạt động, sự khác biệt chủ yếu là ở phong cách.

Chúng giống nhau ở chỗ nào

Hai khai báo này mô tả các hình dạng giống hệt nhau:

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

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

const a: User = { id: 1, name: "Asha" };
const b: UserAlias = a;   // no error

TypeScript sử dụng kiểu cấu trúc, có nghĩa là nó so sánh các hình dạng hơn là so sánh tên. Đó là lý do tại sao User có thể được gán cho UserAlias mà không có khiếu nại. Cả hai đều hỗ trợ các thuộc tính tùy chọn, thuộc tính readonly, phương thức và chữ ký chỉ mục.

Giao diện và loại cạnh nhau

Điều chỉ có loại mới có thể làm

Nhiều loại hữu ích hoàn toàn không phải là hình dạng đối tượng và chỉ có bí danh loại mới có thể đặt tên cho chúng:

type Status = "pending" | "paid" | "shipped";   // union
type Point = [number, number];                    // tuple
type Handler = (event: string) => void;           // function type
type Keys = keyof User;                           // computed type
type ReadonlyUser = Readonly<User>;               // utility type

Các kiểu kết hợp là một trong những tính năng có giá trị nhất của TypeScript, vì khi đó trình biên dịch sẽ từ chối bất kỳ giá trị nào ngoài danh sách:

let s: Status = "paid";
s = "refunded";

// error TS2322: Type '"refunded"' is not assignable to type 'Status'.

Điều này giúp phát hiện các lỗi chính tả và các giá trị lỗi thời tại thời điểm biên dịch, trước khi chúng được đưa vào sản xuất.

Tuyên bố sáp nhập

Nếu bạn khai báo một giao diện có cùng tên hai lần, TypeScript sẽ hợp nhất chúng thành một:

interface Settings {
  theme: string;
}
interface Settings {
  language: string;
}

const settings: Settings = { theme: "dark", language: "en" };   // no error

Hãy thử điều tương tự với bí danh loại và trình biên dịch từ chối:

type Config = { theme: string };
type Config = { language: string };

// error TS2300: Duplicate identifier 'Config'.

Hợp nhất là cách các thư viện cho phép bạn mở rộng loại của chúng. Ví dụ: bạn có thể thêm thuộc tính tùy chỉnh vào giao diện Window chung hoặc vào đối tượng yêu cầu của khung mà không cần sửa đổi thư viện. Điều đó thực sự hữu ích.

Mặt trái của nó là việc sáp nhập có thể xảy ra một cách tình cờ. Nếu hai tệp trong một dự án khai báo một giao diện có cùng tên trong cùng một phạm vi, chúng sẽ âm thầm kết hợp với nhau, điều này có thể gây nhầm lẫn. Thay vào đó, một bí danh loại làm cho xung đột đó trở thành một lỗi.

mở rộng vs giao lộ

Cả hai đều cho phép bạn xây dựng trên một loại hiện có:

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

type AdminAlias = UserAlias & { permissions: string[] };

Đối với các thuộc tính tương thích, kết quả là như nhau. Sự khác biệt thể hiện qua xung đột. Khi một giao diện cố gắng thay đổi loại thuộc tính không tương thích, trình biên dịch sẽ báo cáo điều đó ngay lập tức:

interface Base { id: number }
interface Broken extends Base { id: string }

// error TS2430: Interface 'Broken' incorrectly extends interface 'Base'.
//   Types of property 'id' are incompatible.
//     Type 'string' is not assignable to type 'number'.

Giao lộ không phàn nàn khi được khai báo. Thay vào đó, thuộc tính xung đột trở thành never, một loại không có giá trị nào có thể có. Lỗi chỉ xuất hiện sau này, khi bạn cố gắng sử dụng nó:

type Mixed = { id: number } & { id: string };
const m: Mixed = { id: 1 };

// error TS2322: Type 'number' is not assignable to type 'never'.

Lỗi sau đó còn khó hiểu hơn vì nó chỉ ra lỗi thực sự. Đây là một lý do thực tế để ưu tiên extends khi xây dựng các loại đối tượng.

Lớp học và dụng cụ

Một lớp có thể hứa khớp một hình dạng bằng cách sử dụng implements và điều này hoạt động với giao diện hoặc bí danh loại đối tượng:

class Account implements User {
  constructor(public id: number, public name: string) {}
}

Điều này được biên dịch không có lỗi. Lưu ý rằng implements chỉ kiểm tra xem lớp đó có khớp không. Nó không thêm bất kỳ thuộc tính hoặc mã nào. Một lớp không thể triển khai kiểu kết hợp vì không có hình dạng duy nhất nào phù hợp.

Các loại tiện ích và chỉ đọc

Các loại tiện ích như Readonly, Partial, Pick và Omit hoạt động với cả giao diện và bí danh. Kết quả là một loại mới, thường được đặt tên bằng bí danh loại:

const r: ReadonlyUser = { id: 3, name: "Dev" };
r.name = "Chitra";

// error TS2540: Cannot assign to 'name' because it is a read-only property.

Hãy nhớ rằng readonly chỉ là kiểm tra thời gian biên dịch. Trong thời gian chạy, đối tượng là JavaScript thông thường và nó vẫn có thể được thay đổi bằng mã bỏ qua các loại.

Hiệu suất trình biên dịch

Hướng dẫn hiệu suất riêng của nhóm TypeScript đề xuất ưu tiên các giao diện sử dụng extends hơn các nút giao lớn, vì trình biên dịch có thể lưu trữ các mối quan hệ giao diện hiệu quả hơn. Trong các dự án vừa và nhỏ, bạn khó có thể nhận thấy bất kỳ sự khác biệt nào. Nó có thể quan trọng trong các cơ sở mã rất lớn với các kiểu được soạn thảo sâu. Chúng tôi đã không tự đo lường điều này.

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

Một quy tắc được sử dụng rộng rãi, phù hợp với hướng dẫn từ sổ tay TypeScript, là:

• Sử dụng interface cho hình dạng đối tượng, đặc biệt là các API công khai và bất kỳ thứ gì mà các lớp triển khai hoặc các lớp khác có thể mở rộng.
• Sử dụng type cho các hợp nhất, bộ dữ liệu, loại hàm và loại được ánh xạ hoặc tính toán.

Một số đội chỉ cần sử dụng type ở mọi nơi và điều đó cũng hoạt động tốt. Điều quan trọng nhất là tính nhất quán, vì vậy hãy chọn một quy ước, viết nó vào hướng dẫn phong cách của bạn và để một kẻ nói dối thực thi nó. Quy tắc consistent-type-definitions của ESLint từ Typescript-eslint có thể thực hiện việc này.

Những lỗi thường gặp

• Cuộc tranh luận bất tận. Cả hai đều phù hợp với đồ vật, vì vậy hãy giải quyết quy tắc một lần và tiếp tục.
• Sự hợp nhất ngẫu nhiên. Việc sử dụng lại tên giao diện trong cùng phạm vi sẽ âm thầm kết hợp chúng.
• Các giao lộ xung đột. Họ tạo ra các loại never với các lỗi khó hiểu sau này.
• Các loại tin cậy trong thời gian chạy. Chúng bị xóa, vì vậy hãy xác thực dữ liệu bên ngoài.
• Sử dụng any để tắt tiếng các lỗi. Nó sẽ tắt tính năng kiểm tra. Thích unknown và thu hẹp nó.

Chuyển đổi giữa chúng trong cơ sở mã hiện có

Thay đổi interface thành type hoặc ngược lại, thường an toàn đối với hình dạng đối tượng đơn giản, vì TypeScript so sánh các loại theo cấu trúc của chúng chứ không phải theo tên của chúng. Một số điều vẫn cần kiểm tra trước khi bạn chuyển đổi:

• Việc chuyển đổi giao diện thành bí danh loại sẽ loại bỏ việc hợp nhất khai báo, do đó, bất kỳ khai báo thứ hai nào có cùng tên đều trở thành lỗi định danh trùng lặp.
• Việc chuyển đổi bí danh loại thành giao diện chỉ hoạt động đối với hình dạng đối tượng. Các liên kết, bộ dữ liệu và các loại ánh xạ phải ở dạng bí danh loại.
• Thông báo lỗi và trình chỉnh sửa di chuột có thể hiển thị loại khác nhau, điều này có thể gây ngạc nhiên cho đồng đội nhưng không thay đổi hành vi.

Thực hiện thay đổi trong một yêu cầu kéo tập trung, chạy trình biên dịch ở chế độ nghiêm ngặt và bộ thử nghiệm của bạn, đồng thời tránh trộn lẫn nó với công việc tính năng để người đánh giá có thể thấy rằng không có gì khác thay đổi.

Lời kết

Câu hỏi về giao diện và loại có một câu trả lời bình tĩnh: chúng chồng lên nhau đối với các đối tượng, mỗi đối tượng có một vài khả năng riêng biệt và tính nhất quán quan trọng hơn sự lựa chọn. Sử dụng giao diện cho hình dạng và kiểu cho mọi thứ khác, trừ khi nhóm của bạn muốn khác. Để tự mình thấy được sự khác biệt, hãy sao chép các ví dụ trên vào một tệp và chạy tsc --noEmit --strict trên đó.

Câu hỏi thường gặp

Tiếp tục học hỏi