Jedną ze znaczących różnic pomiędzy klasą a interfejsem jest to, że pojęcie interfejsu nie występuje w JavaScript a zatem po skompilowaniu kodu TypeScript zostanie on usunięty.
Na pierwszy rzut oka widoczną różnicą jest również składnia:
Interface
interface User { name: string; surname: string; age: number; active: boolean; setStatus: () => boolean }
Dzięki interface możemy w sposób jawny ustawić prawidłową adnotację oczekiwanego typu. Przykładem może być użycie interfejsów dla odpowiedzi z API. Jeżeli zaimplementujemy interfejs wtedy będzie wiadomo czego oczekujemy od odpowiedzi z serwera nie używamy wtedy typu any, który i tak nic nam nie mówi. Oczywiście tak samo jak klasy interfejs możemy rozszerzać. Nic nie stoi na przeszkodzie aby użyć go wiele razy (o to chodzi). Posługując się przykładem możemy rozszerzyć podany interfejs o role.
interface Admin extends User { role: number; permission: AdminPermission; }
Przypominając interfejs jest używany tylko przez TypeScript w czasie kompilacji, a następnie jest usuwany. Interfejsy nie trafiają do naszych końcowych danych wyjściowych JavaScript. Zachęcam do eksperymentowania z playground.
/* TypeScript */ interface User { name: string; surname: string; } class User implements User { name = 'Jon'; } /* JavaScript */ "use strict"; class User { constructor() { this.name = 'Jon'; } }
Class
class User { name: string; surname: string; age: number; active: boolean; setStatus: () => boolean; }
Można powiedzieć, że największa różnica między klasą a interfejsem polega na tym, że klasa zapewnia implementację czegoś, a nie tylko zapewnia mu kształt (jest swoistą fabryką obiektów) gdy interfejs jest strukturą używaną wyłącznie do sprawdzania typu.