Difference between interfaces and classes in Typescript

Question

What is the different between Typescript Interfaces and Classes? When do I use a Class? When do I use Interfaces? What are the advantages of them?

I need to create some kind of types for an http-request to my backend server (Doing it with Angular 2), like : },

"fields": {
  "project": {
      "id": "10000"
  },
  "summary": "something's wrong",
  "issuetype": {
      "id": "10000"
  },
  "assignee": {             // not neccesary required
      "name": "homer"
  },
  "reporter": {
      "name": "smithers"
  },
  "priority": {            // not neccesary required
      "id": "20000"
  }
}

What should I use for building these models? Thank you!

Answer 1

2019: Update on Differences and Usages

First, there is the obvious difference: syntax. This is a simple, but necessary to understand difference: Interface properties can end in commas or semi-colons, however class properties can only end in semi-colons. Now the interesting stuff. The sections about when to use and not to use may be subjective - these are the guidelines I give people on my team, but it is possible that other teams will have other guidelines for valid reasons. Feel free to comment if your team does it differently, I would love to learn why.

Interfaces: Allow for defining a type that will be used during design and compile time for strong typing. They can be "implemented" or "extended" but cannot be instantiated (you can't new them). They get removed when transpiling down to JS so they take up no space, but they also cannot be type checked during runtime, so you can't check if a variable implements a specific type at runtime (e.g. foo instanceof bar), except by checking the properties it has: Interface type check with Typescript.

When to use interfaces: Use them when you need to create a contract of the properties and functions for an object that will be used in more than one place in your code, especially more than one file or function. Also, use when you want other objects to start with this base set of properties, such as having a Vehicle interface that multiple classes implement as specific types of vehicles, like Car, Truck, Boat (e.g. class Car implements Vehicle).

When not to use interfaces: When you want to have default values, implementations, constructors, or functions (not just signatures).

Classes: Also allow for defining a type that will be used during design and compile time for strong typing, and, additional, can be used during runtime. This also means that the code is not compiled out, so it will take up space. This is one key difference mentioned by @Sakuto, but has more implications than just space. It means that classes can be typed checked, retaining the understanding of "who they are" even in the transpiled JS code. Further differences include: classes can be instantiated using new and can be extended, but not implemented. Classes can have constructors and actual function code along with default values.

When to use classes: When you want to create objects that have actual function code in them, have a constructor for initialization, and/or you want to create instances of them with new. Also, for simple data objects, you can use classes for setting up default values. Another time you would want to use them is when you are doing type checking, though there are workarounds for interfaces if needed (see the interface section OS link).

When not to use classes: When you have a simple data interface, do not need to instantiate it, when you want to have it implemented by other objects, when you want to simply put an interface on an existing object (think type definition files) or when the space it would take up is prohibitive or unwarranted. As a side note, if you look in .d.ts files you will notice that they only use interfaces and types, and thus this is completely removed when transpiled to TS.

Final note, there are two other options than just classes and interfaces, the first is something called a "type", which is pretty similar to an interface, but check this SO post, specifically the 2019 Update answer: Typescript: Interfaces vs Types. The last option is to go functional programming style (not OOP) with TS.

For the full story with examples visit PassionForDev.com and more good reading on classes vs. inheritance with examples visit https://jameshenry.blog/typescript-classes-vs-interfaces/.

Answer 2

According to Angular 2 styleguide it's recommended to use Class over Interface for the typing. The main difference is that class will persist when compiled while Interface are purely removed since they do not serve any usage.

Just stay consistent over the whole project, and prefer the styleguide approach with class, who know, maybe one day you will need to add method to your models.

Check answer below for more details: https://stackoverflow.com/a/55505227/5463904