What is the purpose of using TypeScript interfaces for angular services for type information

Question

What are the advantages of creating an interface for a angular service vs exporting the service class and using that for type information instead?

Example:

class Dashboard {
    constructor(ui: IUiService){}
}

vs

class Dashboard {
    constructor(ui: UiService){}
}

Is there a performance benefit? What happens if I just use the service class for type information?

It seems to be additional work with no benefit unless you have different implementations of a service that can be used but have a common base. Or when you want to mock services in unit tests instead of using them directly.

Edit: I'm interested to know what the typescript compiler will do for imports that are just used for type info. Will it invoke a constructor or add to the require statement (ES6)? Would it new up an instance of the class?

gilamran · Accepted Answer · 2015-08-24 18:54:16Z

6

This is not a TypeScript question, this is a "What are interfaces good for" (In short) The answer is: A client should not "know" what is the real implementation of a requested service. Your UiService today is enough for your needs, but one day you might have another implementation for it, or even you would like to mock it in your tests.

Another case would be, that UiService was extended by ProUiService all over your system, you would have to go all over your system and change the type of your injects while it is not really needed.

As said before: A client should not know what is the real implementation of a requested service.

Edit (Answering the edit):

The TypeScript compiler will does not "know" where to pick these types Class/Interface you will have to use tsconfig.json or a reference (comment) in your code to let TypeScript understand where this declaration is defined. It does not matter if it's a type of a class.

It is important to understand that when you import (ES6 style) a class and never really use it (Only use it as a type definition) it will get removed by the compiler, because types does not really exist in JavaScript. BUT, if you use it. For example:

var ui = new UiService(); // This will generate a javascript code

The compiler will not remove the import statement.

edited Aug 24, 2015 at 18:54

answered Aug 20, 2015 at 20:13

gilamran

7,3144 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PSL Over a year ago

I thought this was spot on!!

Robert Baker Over a year ago

It is a typescript question, because I want to know what the ts compiler will do in both cases. Especially when it comes to ES6 importing a class just for type info.

David Sherret · Accepted Answer · 2015-08-20 19:36:25Z

4

...unless you have different implementations of a service that can be used but have a common base. Or when you want to mock services in unit tests instead of using them directly.

That's exactly why. There is no performance benefit to using interfaces as interfaces do not show up in the transpiled JavaScript.

You can use the service class for type information if you'd like and that's what's done in the angular Step by Step Guide—see Create a class for the array property and inject into component.

answered Aug 20, 2015 at 19:36

David Sherret

108k28 gold badges197 silver badges190 bronze badges

Collectives™ on Stack Overflow

What is the purpose of using TypeScript interfaces for angular services for type information

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related