Sự khác biệt giữa “lớp khai báo” và “giao diện” trong TypeScript

Trong TypeScript, khi tạo tệp khai báo nguồn .d.ts, tệp nào thích hợp hơn và tại sao?

declare class Example {
    public Method(): void; 
}

hoặc là

interface Example {
    Method(): void;
}

Sự khác biệt mà tôi có thể nói là các giao diện không thể có các phương thức tĩnh, vì vậy bạn phải sử dụng một lớp cho điều đó. Cả hai đều không sản xuất bất kỳ đầu ra JS nào, vì vậy có lẽ nó không quan trọng?

interfacelà khi bạn chỉ muốn mô tả hình dạng của một đối tượng. Không bao giờ có việc tạo mã cho các giao diện - chúng chỉ là một tạo tác trong hệ thống kiểu. Bạn sẽ không thấy sự khác biệt trong việc tạo mã cho một lớp tùy thuộc vào việc nó có implementsmệnh đề hay không .

declare classlà khi bạn muốn mô tả một lớp hiện có (thường là một lớp TypeScript, nhưng không phải luôn luôn) sẽ hiện diện bên ngoài (ví dụ: bạn có hai tệp .ts biên dịch thành hai tệp .js và cả hai đều được bao gồm qua scriptthẻ trong một trang web). Nếu bạn kế thừa từ classsử dụng extends(bất kể loại cơ sở là một declare classhay mộtclass ), trình biên dịch sẽ tạo ra tất cả mã để kết nối chuỗi nguyên mẫu và các hàm tạo chuyển tiếp và những gì không.

Nếu bạn cố gắng kế thừa từ một declare class giao diện lẽ ra phải là một giao diện, bạn sẽ gặp phải lỗi thời gian chạy vì mã được tạo đó sẽ tham chiếu đến một đối tượng không có biểu hiện thời gian chạy.

Ngược lại, nếu bạn chỉ đơn giản là implementmột giao diện mà lẽ ra phải là một declare class, bạn sẽ phải tự mình triển khai lại tất cả các thành viên và sẽ không tận dụng được bất kỳ mã sử dụng lại nào từ lớp cơ sở và các hàm việc kiểm tra chuỗi nguyên mẫu trong thời gian chạy sẽ từ chối đối tượng của bạn vì không thực sự là một thể hiện của lớp cơ sở.

Để trở nên thực sự mọt sách, nếu bạn có nền tảng C ++, bạn có thể nghĩ đại khái interfacenhư typedefvà declare classnhư một externkhai báo của một hàm tạo hoàn toàn thiếu định nghĩa trong đơn vị biên dịch này.

Từ khía cạnh tiêu dùng thuần túy (viết mã mệnh lệnh, không thêm các loại mới), sự khác biệt duy nhất giữa interfacevà declare classlà bạn không thể có newgiao diện. Tuy nhiên, nếu bạn có ý định extend/ implementmột trong những loại này trong một cái mới class, bạn hoàn toàn phải chọn đúng giữa interfacevàdeclare class . Chỉ một trong số chúng sẽ hoạt động.

Hai quy tắc sẽ phục vụ bạn tốt:

• Tên của kiểu có phù hợp với một hàm khởi tạo (một cái gì đó bất khả xâm phạm với new) thực sự hiện diện trong thời gian chạy không (ví dụ: Datelà, nhưng JQueryStatickhông)? Nếu không , bạn chắc chắn muốninterface
• Tôi đang xử lý một lớp đã biên dịch từ một tệp TypeScript khác hoặc một thứ gì đó đủ tương tự? Nếu có , hãy sử dụngdeclare class

Bạn có thể triển khai giao diện:

class MyClass implements Example {
    Method() {

    }
}

Trong khi declare classcú pháp thực sự được sử dụng để thêm định nghĩa kiểu cho mã bên ngoài không được viết bằng TypeScript - vì vậy việc triển khai là ở "nơi khác".

Theo thuật ngữ của giáo dân, declaređược sử dụng trong .ts/ d.tsfiles để nói với trình biên dịch rằng chúng ta nên mong đợi từ khóa mà chúng ta declaringtồn tại trong môi trường đó, ngay cả khi nó không được định nghĩa trong tệp hiện tại. Điều này sau đó sẽ cho phép chúng ta có được sự an toàn về kiểu khi sử dụng đối tượng đã khai báo, vì trình biên dịch Typecript bây giờ biết rằng một số thành phần khác có thể cung cấp biến đó.

Sự khác biệt giữa TS declarevà interfaceTS:

khai báo:

declare class Example {
    public Method(): void; 
}

Trong đoạn mã trên declarecho phép trình biên dịch TS biết rằng ở đâu đó lớp Exampleđược khai báo. Điều này không có nghĩa là lớp được bao gồm một cách kỳ diệu. Bạn với tư cách là một lập trình viên có trách nhiệm có sẵn lớp khi bạn khai báo nó (với declaretừ khóa).

giao diện:

interface Example {
    Method(): void;
}

An interfacelà một cấu trúc ảo chỉ tồn tại trong bảng chữ. Trình biên dịch typecript sử dụng nó cho mục đích duy nhất là kiểm tra kiểu. Khi mã được biên dịch sang javascript, toàn bộ cấu trúc này sẽ bị loại bỏ. Trình biên dịch typecript sử dụng các giao diện để kiểm tra xem các đối tượng có cấu trúc phù hợp hay không.

Ví dụ khi chúng ta có giao diện sau:

interface test {
  foo: number,
  bar: string,
}

Các đối tượng mà chúng tôi xác định có kiểu giao diện này cần phải khớp chính xác với giao diện:

// perfect match has all the properties with the right types, TS compiler will not complain.
  const obj1: test = {   
    foo: 5,
    bar: 'hey',
  }