CODEWITHSUNDEEP
javascriptangulartypescript
Boo Yan Jiong
Boo Yan Jiong

Reputation: 2731

Usage of class in 'typing' the variable (vs interface) and 'modelling' (for Typescript Angular 2 project)

Let say I have a model class

class User {
    name: string;
    email: string;
}

and a service related to user

class UserService {
    getInfo (usr: User) {
        console.log(usr);
    }
}

The usr: User is an input parameter for getInfo method, and no User class is created for that statement since the User just "typing" the usr. Instead, we can replace it with interface, isn't it?

Yeah, I am aware of Angular 2 official guide that suggest try to use class instead of interface

quote: "Consider using a class instead of an interface"

and I can accept it, although it is weird.

My question is, WHY WHY WHY use a class to "type" a variable, since we don't create any instance from it? We can replace the UserService class as shown below, and it works too...

class UserService {
    getInfo (usr: any) { //this work too
        console.log(usr);
    }
}

(please correct me if I am wrong)

[#1] This will create a property that have the class content

class UserService {
    usr: User = User; //usr = { name: '', email: ''}
}

[#2] This is used by Angular 2 to do dependency injection (assuming I have listed the User as provider), and in this case, it is similar to #1 as we are just copy the User to usr. (usually, we do DI on service, instead of model, since injecting model will have the same effect as "assigning" it to a variable, am I correct?)

class UserService {
    constructor (private usr: User) {}
}

[#3] And this confuse me... because why we still do it since we don't need it? (because nothing is created, no usage here)

class UserService {
    usr: User; //usr: any; (?)
}
class UserMoreService {
    getInfo (usr: User) {console.log(usr);} //usr: any (?)
}

Lastly, may I know what is the motivation behind to create a "model" class in Angular 2 project?

We have the component to display data, and to get the data, we can ask it from related service, and the service will get it from the server.

Can you see this? we don't need a "third party" model to "hold" the data, because everything can be done without declaring a "model" class. Can please tell me when to create a "model"? I don't see any reason to create that...

Upvotes: 0

Views: 82

Answers (1)

eko
eko

Reputation: 40647

It is not a must but just a suggestion.

Why?

An interface-class can be a provider lookup token in Angular dependency injection.

Source: https://angular.io/styleguide#!#03-03

Creating a class is pretty much the same work with respect to creating an interface but you can use these classes as a class-interface in your provider tokens later on.

{ provide: MinimalLogger, useExisting: LoggerService },

This can be used as a type of inheritance among Angular providers.

export abstract class MinimalLogger {
  logs: string[];
  logInfo: (msg: string) => void;
}

When you use a class this way, it's called a class-interface. The key benefit of a class-interface is that you can get the strong-typing of an interface and you can use it as a provider token in the way you would a normal class.

Source: https://angular.io/docs/ts/latest/cookbook/dependency-injection.html#!#class-interface

Side note: If you're sure that you aren't going to use it as a provider token or so IMO you should be using an interface since they disappear after the code is transpiled to JavaScript. Hence, they don't use your memory.

Using a class as an interface gives you the characteristics of an interface in a real JavaScript object.

Of course a real object occupies memory. To minimize memory cost, the class should have no implementation

Upvotes: 1

Related Questions