What is the difference between interface and abstract class in Typescript?

Question

I wrote a couple of lines of code to experiment and differentiate between these two: interface and abstract class.

I found out that they have the same restriction.

interface IPerson {   name: string;   talk(): void; }  interface IVIP {   code: number; }  abstract class Person {   abstract name: string;   abstract talk(): void; }  class ManagerType1 extends Person {   // The error I get is that I need to implement the talk() method   // and name property from its base class. }  class ManagerType2 implements IPerson {   // The error I get is that I need to implement the talk() method    // and the name property from the interface. }   class ManagerType3 implements IPerson, IVIP {   // Now the error I get is that I need to implement all the    // properties and methods of the implemented interfaces to the derived class } 

As what I found is, there are no clear differences between these two since they both implement the same restriction. The only thing I notice is inheritance and implementation.

1. A class can only extend to a single base class
2. A class can implement multiple interfaces.

Did I catch it right? If so when do I need to use one?

UPDATE

I do not know if this is the right answer but you can really use BOTH depending on your situation. OOP is really cool.

class ManagerType3 extends Person implements IPerson, IVIP {   // Now the restriction is that you need to implement all the abstract   // properties and methods in the base class and all    // the properties and methods from the interfaces } 

Answer 1

Interfaces

An interface is a contract that defines the properties and what the object that implements it can do. For example, you could define what can do a Plumber and an Electrician:

interface Electrician {   layWires(): void }  interface Plumber {   layPipes(): void } 

Then, you can consume the services of your interfaces:

function restoreHouse(e: Electrician, p: Plumber) {   e.layWires()   p.layPipes() } 

Notice that the way you have to implement an interface is free. You can do that by instantiating a class, or with a simple object:

let iAmAnElectrician = {   layWires: () => { console.log("Work with wires…") } } 

An interface doesn't exist at all at runtime, so it is not possible to make an introspection. It is the classic JavaScript way to deal with object programming, but with a good control at compile time of the defined contracts.

Abstract classes

A class is both a contract and the implementation of a factory. An abstract class is also an implementation but incomplete. Especially, an abstract class exists at runtime, even if it has only abstract methods (then instanceof can be used).

When you define an abstract class, you often try to control how a process has to be implemented. For example, you could write something like this:

abstract class HouseRestorer {   protected abstract layWires(): void   protected abstract layPipes(): void   restoreHouse() {     this.layWires()     this.layPipes()   } } 

This abstract class HouseRestorer defines how the methods layWires and layPipes will be used, but it is up to a child class to implement the specialized treatments before it can be used.

Abstract classes are a traditional OOP approach, which is not traditional in JavaScript.

Both approaches allow the same things to be done. But they are two different ways of solving a problem.

Answer 2

A bigger difference in TypeScript is that (abstract) classes are available at runtime, while interfaces are compile time only. This means that you cannot, for example, use instanceof with interfaces.

let x: any;  if (x instanceof IPerson) { // Error: 'IPerson' only refers to a type, but is being used as a value here.  }  if (x instanceof Person) { // OK  } 

If you don't really need runtime types, like the above example, or want to have implementations in the concrete classes only, go for interfaces. As they are compile time only, the size of the generated JS will be smaller.