When use a interface or class in Typescript

Question

I have a simple scenario of a login that requires user's input a email and password in Typescript. I need to create some type to get this strong-typed and send it to the back-end.

Should this be written as:

export interface UserLogin {
  email: string;
  password: string;
}
//OR
export class UserLogin {
  email: string;
  password: string;
}

And how to know when is the scenario to use any of these?

One major difference is that interfaces is purely a typescript construct, only used at compile-time - that is to say, interfaces add nothing to the final transpiled javascript output, they vanish completely (which is good!). Classes however exists in javascript, so every class you create in your typescript code will also exist in the javascript output. If all you want / need is type-checking at compile time, then this is bloat that makes your js files larger. So stick to interfaces if that covers your needs, never preemptively add classes, only add a class later if you need it. — AnorZaken, Jul 16 '21 at 07:46
Note that your example class isn't actually valid TypeScript. It's actually impossible to create a valid instance of `UserLogin`, because neither of the properties are optional, and yet the constructor doesn't set them. With `strictPropertyInitialization` (also provided by `strict`) disabled, the compiler will ignore it, but with the entire compiler enabled it will. — Eric Haynes, Oct 17 '22 at 20:31

score 195 · Accepted Answer · answered Aug 06 '18 at 23:31

195

At it's most basic, a class is essentially an object factory (ie. a blueprint of what an object is supposed to look like and then implemented), whereas an interface is a structure used solely for type-checking.

While a class may have initialized properties and methods to help create objects, an interface essentially defines the properties and type an object can have.

In the scenario you described, one would use the interface to set the type for UserLogin.

answered Aug 06 '18 at 23:31

alephnerd

2,176
1
8
6

3

This is the accepted answer, and what everyone says, but then why are interfaces used anywhere other than extending classes that implement them? Why are we allowed (and indeed encouraged) to "instantiate an object from an interface", like `foo = {} as IModel` ? – GreenAsJade Mar 14 '22 at 01:10
1

@GreenAsJade confuses me as well, I see them get used interchangeably – Amon Apr 15 '22 at 20:07
Accepted answer right here! – rolandforbes Oct 30 '22 at 10:22
This is a while ago but when would you ever use classes? – Berlin Brown May 27 '23 at 20:33

score 52 · Answer 2 · answered Aug 06 '18 at 23:44

If you just need to declare a custom type then use interfaces. IMO, there is a very pragmatic reason - they don't get transpiled into JavaScript so the generated code is shorter.

Interfaces won't work if you need to instantiate objects with constructors or use a framework that instantiates and inject them. Then use classes or abstract classes.

D. Phi · Answer 3 · 2018-08-06T23:35:26.777

Actually both will do the job. I would suggest you to use interfaces though if you just do type-checking as it is specifically designed for that purpose.

Classes and interfaces are powerful structures that facilitate not just object-oriented programming but also type-checking in TypeScript. A class is a blueprint from which we can create objects that share the same configuration - properties and methods. An interface is a group of related properties and methods that describe an object, but neither provides implementation nor initialisation for them.

From: https://toddmotto.com/classes-vs-interfaces-in-typescript

artem · Answer 4 · 2018-08-06T23:39:54.540

send it to the back-end

Sending classes over the wire requires extra effort - if you use JSON content type, your class will come as plain object to your back-end code. See numerous answers for this question telling how to convert JSON back to a class object so it's possible to call its methods.

But since the class in your question has no methods, it does not matter, unless the back-end code will perform runtime checks using instanceof.

To avoid these problems, use interface which has only data members for representing objects for communicating with back-end.

When use a interface or class in Typescript

4 Answers4

Linked

Related